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随 着 我 国 改革 开放 的 进一步 深化 ,高 等 教育 也 得 到 了 快速 发 展 , 各 地 高 校 紧密 结合 地 方 
经 济 建设 发 展 需要 ,科学 运用 市 场 调节 机 制 ,加 大 了 使 用 信息 科学 等 现代 科学 技术 提升 、 改 
造 传统 学 科 专 业 的 投入 力度 ,通过 教育 改革 合理 调整 和 配置 了 教育 资源 ,优化 了 传统 学 科 专 
业 , 积 极为 地 方 经 济 建设 输送 人 才 , 为 我 国 经 济 社会 的 快速 ,健康 和 可 持续 发 展 以 及 高 等 教 
育 自身 的 改革 发 展 做 出 了 巨大 贡献 。 但 是 ,高 等 教育 质量 还 需要 进一步 提高 以 适应 经 济 社 
会 发 展 的 需要 ,不 少 高 校 的 专业 设置 和 结构 不 尽 合理 ,教师 队伍 整体 素质 或 待 提高 ,人 才 培 
养 模式 ,教学 内 容 和 方法 需要 进一步 转变 ,学 生 的 实践 能 力 和 创新 精神 亚 待 加 强 。 

教育 部 一 直 十 分 重视 高 等 教育 质量 工作 。2007 年 1 月 ,教育 部 下 发 了 《关于 实施 高 等 
学 校本 科教 学 质量 与 教学 改革 工程 的 意见 》, 计 划 实 施 “ 高 等 学 校本 科教 学 质量 与 教学 改革 
工程 (简称 “质量 工程 ')”, 通 过 专业 结构 调整 .课程 教材 建设 、 实 践 教学 改革 、 教 学 团队 建设 
等 多 项 内 容 ,进一步 深化 高 等 学 校 教学 改革 ,提高 人 才 培 养 的 能 力 和 水 平 ,更 好 地 满足 经 济 
社会 发 展 对 高 素质 人 才 的 需要 。 在 贯彻 和 落实 教育 部 “质量 工程 的 过 程 中 ,各 地 高 校 发 挥 
师资 力量 强 ,办 学 经 验 丰富 ,教学 资源 充裕 等 优势 ,对 其 特色 专业 及 特色 课程 ( 群 ) 加 以 规划 、 
整理 和 总 结 ,更 新 教学 内 容 改革 课程 体系 ,建设 了 一 大 批 内 容 新 .体系 新 ,方法 新 .手段 新 的 
特色 课程 。 在 此 基础 上 ,经 教育 部 相关 教学 指导 委员 会 专家 的 指导 和 建议 ,清华 大 学 出 版 社 
在 多 个 领域 精 选 各 高 校 的 特色 课程 ,分 别 规划 出 版 系列 教材 ,以 配合 “质量 工程 "的 实施 , 满 
足 各 高 校 教学 质量 和 教学 改革 的 需要 。 

为 了 深入 贯彻 落实 教育 部 (关于 加 强 高 等 学 校本 科教 学 工作 ,提高 教学 质量 的 若干 意 
见 ) 精 神 , 紧 密 配合 教育 部 已 经 启动 的 “高 等 学 校 教 学 质量 与 教学 改革 工程 精品 课程 建设 工 
作 ”, 在 有 关 专 家 教授 的 倡议 和 有 关 部 门 的 大 力 支持 下 ,我 们 组 织 并 成 立 了 “清华 大 学 出 版 
社 教材 编审 委员 会 "(以 下 简称 “ 编 委 会 ”), 旨 在 配合 教育 部 制定 精品 课程 教材 的 出 版 规划 ， 
讨论 并 实施 精品 课程 教材 的 编写 与 出 版 工作 。“ 编 委 会 "成员 皆 来 自 全 国 各 类 高 等 学 校 教学 
与 科研 第 一 线 的 骨干 教师 ,其 中 许多 教师 为 各 校 相关 院 、 系 主管 教学 的 院 长 或 系 主任 。 

按照 教育 部 的 要 求 ， 编 委 会 "一 致 认为 ,精品 课程 的 建设 工作 从 开始 就 要 坚持 高 标准 、 
严 要 求 , 处 于 一 个 比较 高 的 起 点 上 ; 精品 课程 教材 应 该 能 够 反映 各 高 校 教学 改革 与 课程 建 
设 的 需要 ,要 有 特色 风格 有 创新 性 (新 体系 、 新 内 容 、 新 手段 .新 思路 ,教材 的 内 容 体 系 有 较 
高 的 科学 创新 、 技 术 创 新 和 理念 创新 的 含量 ) 、 先 进 性 (对 原 有 的 学 科 体系 有 实质 性 的 改革 和 
发 展 ,顺应 并 符合 21 世纪 教学 发 展 的 规律 ,代表 并 引领 课程 发 展 的 趋势 和 方向 ) 、 示 范 性 ( 教 
材 所 体现 的 课程 体系 具有 和 较 广泛 的 辐射 性 和 示范 性 ) 和 一 定 的 前 脆性。 教材 由 个 人 申报 或 
各 校 推荐 (通过 所 在 高 校 的 “ 编 委 会 成员 推荐 ) ,经 “ 编 委 会 ”认真 评审 ,最 后 由 清华 大 学 出 版 
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社 审 定 出 版 。 


目前 ,针对 计算 机 类 和 电子 信息 类 相关 专业 成 立 了 两 个 “ 编 委 会 ”, 即 “清华 大 学 出 版 社 
计算 机 教材 编审 委员 会 "和 “清华 大 学 出 版 社 电子 信 息 教材 编审 委员 会 "。 推 出 的 特色 精品 


教材 包括 : 


A) 21 世纪 高 等 学 校规 划 教 材 ， 计算 机 应 用 一 一 高 等 学 校 各 类 专业 ,特别 是 非 计 算 机 


专业 的 计算 机 应 用 类 教材 。 
(2) 21 世纪 高 等 学 校规 划 教 材 
教材 。 


G) 21 世纪 高 等 学 校规 划 教材 
+ 软件 工程 一 一 高 等 学 校 软件 工程 相关 专业 的 教材 。 


(4) 21 世纪 高 等 学 校规 划 教 材 


(5) 21 世纪 高 等 学 校规 划 教材 。 
“财经 管理 与 应 用 。 


(6) 21 世纪 高 等 学 校规 划 教 材 


(7) 21 世纪 高 等 学 校规 划 教材 。 
(8) 21 世纪 高 等 学 校规 划 教材 。 


* 计算 机 科学 与 技术 一 一 高 等 学 校 计算 机 相关 专业 的 


电子 信息 一 一 高 等 学 校 电 子 信 息 相关 专业 的 教材 。 


信息 管理 与 信息 系统 。 


电子 商务 。 
物 联 网 。 


清华 大 学 出 版 社 经 过 三 十 多 年 的 努力 ,在 教材 尤其 是 计算 机 和 电子 信息 类 专业 教材 出 
版 方面 树立 了 权威 品牌 ,为 我 国 的 高 等 教育 事业 做 出 了 重要 贡献 。 清 华 版 教材 形成 了 技术 
准确 、 内 容 严 并 的 独特 风格 ,这 种 风格 将 延续 并 反映 在 特色 精品 教材 的 建设 中 。 


清华 大 学 出 版 社 教材 编审 委员 会 
KRA: 魏 江 江 
E-mail: weijj@ tup. tsinghua. edu, cn 


Web 应 用 已 经 成 为 Internet 上 占有 绝对 优势 的 应 用 ,从 网 上 商城 到 在 线 游 戏 , 从 企业 
形象 展示 到 社交 网 站 ,无 一 不 体现 出 Web 应 用 的 强大 影响 力 。Web 应 用 不 仅仅 是 在 
Internet 上 ,在 企业 内 部 网 络 (Intranet) 中 ,也 越 来 越 多 地 采用 Web 应 用 的 办 法 完成 管理 与 
信息 交流 工作 。 因 此 ,掌握 一 定 的 Web 设计 与 开发 的 知识 和 技能 ,成 为 当今 信息 时 代 大 专 
院 校 学 生 知 识 结 构 中 不 可 或 缺 的 一 环 。 

作为 Web 设计 的 进 阶 教材 ,本 书 涉及 了 Web 前 端 设计 方面 必 备 的 基础 知识 ,其 中 包括 
HTML CSS jQuery, 图 片 处 理 软件 Photoshop ,动画 设计 工具 Flash 和 网 页 设计 工具 
Dreamweaver。 

为 配合 本 科 院 校 的 双语 教学 ,本 书 特 地 编写 了 英文 内 容 的 HTML 和 CSS 章节 (第 二 部 
分 Chapter2 及 Chapter3, 对 应 的 中 文 译文 为 第 一 部 分 的 第 2 章 和 第 3 章 ) 。 

建议 有 能 力 的 读者 学 习 英 文 编写 的 Chapter2、Chapter3, 熟 练 掌 握 Web 前 端 设计 方面 
的 英文 术语 后 ,在 资源 丰富 的 英文 社区 与 论坛 获得 帮助 将 不 会 有 语言 障碍 。 

本 书 强调 应 用 。 书 中 不 仅 有 丰富 的 例子 ,还 有 实战 性 强 的 项 目 设 计 , 可 以 使 读者 从 学 习 
模仿 迅速 过 渡 到 实战 。 本 书 例子 及 综合 应 用 实例 的 源 代 码 均 提供 下 载 。 

本 书 由 吴强 策划 ,张杰 负责 组 稿 , 参 与 本 书 编著 工作 的 作者 有 浙江 清华 长 三 角 研 究 院 吴 
强 , 郑 州 轻工业 学 院 张 杰 .吉星 、 李 建春 . 梁 文 静 . 张 静 、 李 勇 等 。 其 中 第 一 部 分 , 张 静 编写 第 
1 章 和 第 7 章 ,张杰 编写 第 2 章 、 第 3 章 ,吉星 编写 第 4 章 , 梁 文静 编写 第 5 章 , 李 建春 、. 李 勇 
编写 第 6 章 ; 第 二 部 分 由 张杰 编写 ; 全 书 最 后 由 吴强 、 李 勇 统一 审核 ,河南 中 烟 工业 有 限 责 
任 公司 的 张 明 明 对 本 书 的 编著 提 了 很 多 宝贵 意见 。 在 此 ,特别 感谢 清华 大 学 出 版 社 、 郑 州 轻 
工业 学 院 , 浙 江 清 华 长 三 角 研 究 院 ,河南 中 烟 工业 有 限 责任 公司 等 单位 对 编著 工作 的 支持 。 

外 籍 专家 John Sharp 审核 了 本 书 的 英文 内 容 ,在 此 表示 感谢 。 

由 于 作者 水 平 有 限 , 书 中 难免 有 不 妥 及 错误 之 处 , 敬 请 读者 批评 指正 。 
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Gi Internet 的 发 展 


1.1.1 Internet 起 源 


Internet 即 因特网 ,是 全 世界 最 大 的 计算 机 网 络 , 其 前 身 是 美国 国防 部 高 级 研究 计划 局 
(ARPA) 在 20 世纪 60 年 代 末 主持 研制 的 ARPANet( 阿 帕 网 )。 到 20 世纪 70 ER, 
ARPANet 实现 了 在 几 十 台 计 算 机 的 网 络 内 部 通信 ,不 同 计算 机 网 络 之 间 仍 然 不 能 互通 。 
为 此 ，ARPA 又 设立 了 新 的 研究 项 目 , 研 究 的 主要 内 容 是 实现 不 同 计算 机 局 域 网 的 互联 互 
通 , 形 成 互联 网 (Internetwork) ,简称 为 Internet, 

1986 年 ,美国 国家 科学 基金 组 织 (NSF) 建 立 了 NSFnet, 实 现 了 将 分 布 在 美国 不 同 地 点 
的 5 个 为 科研 教育 服务 的 超级 计算 机 中 心 互联 ,并 支持 地 区 网 络 。1988 年 ,NSFnet 取代 
ARPANet 成 为 Internet 的 主干 网 。1992 年 ,美国 IBM, MCI, MERIT 三 家 公司 联合 组 建 
ANSnet, 成 为 Internet 的 另 一 个 主干 网 ,从 而 使 Internet 开始 走向 商业 化 。 

1995 年 4 月 30 日 ,NSFnet 正式 宣布 停止 运作 。 此 时 Internet WA TMA i Se 
球 91 个 国家 ,主机 超过 400 万 台 。1998 年 ,Internet 上 的 用 户 将 突破 1 亿 ,2000 年 ,全 世界 
拥有 100 多 万 个 网 络 ,1 亿 台 主机 和 超过 10 亿 的 用 户 。Internet 已 不 再 是 计算 机 人 员 和 军 
事 部 门 进行 科研 的 领域 ,而 是 变 成 了 一 个 开发 和 使 用 信息 资源 的 覆盖 全 球 的 信息 海洋 。 同 
时 ,Internet 的 应 用 也 渗透 到 了 各 个 领域 一 一 从 学 术 研究 到 股票 交易 、 从 学 校 教育 到 娱乐 游 
戏 . 从 联机 信息 检索 到 在 线 居家 购物 等 , Internet 已 成 为 人 类 工作 .生活 中 不 能 或 缺 的 一 
部 分 。 

Internet 在 我 国 起 步 较 晚 ,但 发 展 迅速 。1986 年 ,国内 一 些 科研 单位 (如 : 中 国 科学 院 ) 
开始 初步 接触 Internet, 通 过 电话 拨号 链接 到 欧洲 一 些 国家 ,进行 国际 联机 数据 库 信 息 检 
索 。1990 年 实现 了 中 国 用 户 与 Internet 之 间 的 电子 邮件 通信 。 目 前 中 国 和 Internet 互联 
的 主要 网 络 有 中 国教 育 科 研 网 (CERNET)、 中 国 科 学 技术 网 (CSTNET)、 金 桥 网 
(GBNET) ,中 国 公 用 计算 机 互联 网 (Chinanet) 等 。 前 两 个 网 络 是 以 教育 .科研 服务 为 目的 
的 ,属于 非 赢利 性 质 ; 后 两 个 网 络 是 以 商业 经 营 为 目的 的 ,又 称 为 商业 网 。 
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1.1.2 计算 机 网 络 及 其 功能 


现在 ,计算 机 网 络 的 精确 定义 并 未 统一 ,可 简单 的 定义 为 以 交换 共享 信息 为 目的 的 多 台 
自治 计算 机 的 互联 集合 。 自 治 计算 机 是 指 网 络 中 计算 机 之 间 不 存在 主 从 关系 ,各 自 是 一 个 
独立 的 工作 系统 ; 互联 是 指 两 台 计 算 机 通过 通信 介质 连接 在 一 起 ,互相 交换 信息 。 也 可 以 
将 计算 机 网 络 的 组 成 和 功能 定义 得 具体 一 些 , 即 计算 机 网 络 是 指 将 地 理 位 置 不 同 的 多 台 自 
治 计算 机 系统 及 其 外 部 设备 ,通过 通信 介质 互联 ,在 网 络 操作 系统 、 网 络 管理 软件 及 网 络 通 
信 协 议 的 管理 和 协调 下 ,实现 资源 共享 和 信息 传递 的 系统 。 最 简单 的 计算 机 网 络 就 只 有 两 
台 计 算 机 和 连接 它们 的 一 条 通信 线路 , 即 两 个 节点 和 一 条 链 路 。 

计算 机 网 络 的 功能 主要 体现 在 以 下 几 个 方面 。 

(1) 信息 交换 

这 是 计算 机 网 络 最 基本 的 功能 ,主要 完成 计算 机 网 络 中 各 个 节点 之 间 的 系统 通信 ,也 可 
以 称 为 数据 通信 。 例 如 : 电子 邮件 ,发布 新 闻 消 息 . 电 子 贸 易 .远程 电子 教育 等 。 

(2) 资源 共享 

资源 是 指 构成 计算 机 网 络 系统 的 所 有 要 素 ,包括 硬件 资源 、 软 件 资源 和 数据 资源 ,其 中 
共享 数据 资源 最 为 重要 。 例 如 计算 处 理 能 力 、 大 容量 磁盘 、 高 速 打印 机 ,绘图 仪 通 信 线 路 、 
数据 库 ,文件 和 其 他 计算 机 上 的 有 关 信息 ,网 络 上 的 计算 机 可 以 共享 整个 网 络 的 资源 。 

(3) 分 布 式 处 理 

一 项 复杂 的 任务 可 以 划分 成 许多 部 分 ,由 网 络 内 各 计算 机 分 别 协 作 并 执行 完成 有 关 部 
分 ,使 整个 系统 的 性 能 大 为 增强 。 

(4) 集中 管理 

计算 机 网 络 技术 的 发 展 和 应 用 ,已 使 得 现代 办 公 、 经 营 管理 的 模式 发 生 了 很 大 的 变化 。 
目前 ,已 经 有 了 许多 MIS 系统 .OA 系统 等 ,通过 这 些 系统 可 以 实现 日 常 工作 的 集中 管理 ， 
提高 工作 效率 ,增加 经 济 效 益 。 

(5) 远程 传输 

在 计算 机 网 络 中 ,分 布 在 世界 各 地 的 用 户 可 以 互相 传输 数据 信息 ,互相 交流 ,协同 工作 。 

(6) 负载 均衡 

负载 均衡 是 指 工作 被 均匀 地 分 配给 网 络 上 的 各 台 计 算 机 。 网 络 控制 中 心 负责 分 配 和 检 
测 , 当 某 台 计 算 机 负载 过 重 时 ,系统 会 自动 转移 部 分 工作 到 负载 较 轻 的 计算 机 中 去 处 理 。 


1.1.3 分 组 交换 思想 


分 组 交换 技术 ( 包 交 换 ) 是 在 传输 线路 质量 不 高 ,网 络 技术 手段 还 较 单一 的 情况 下 ,产生 
的 一 种 信息 交换 技术 。 分 组 交换 在 传输 信息 时 ,将 传送 的 数据 划分 成 分 组 ,分 组 是 一 定 长 度 
二 进 制 信息 ,然后 通过 在 计算 机 和 终端 之 间 发 送 分 组 实现 计算 机 与 计算 机 之 间 的 通信 。 分 
组 交换 在 每 个 分 组 的 前 面 加 上 一 个 分 组 头 ,用 以 指明 该 分 组 发 往 何 地 址 ,然后 由 交换 机 根据 
每 个 分 组 的 地 址 标志 ,将 它们 转发 至 目的 地 ,这 一 过 程 称 为 分 组 交换 。 

进行 分 组 交换 的 通信 网 称 为 分 组 交换 网 。 从 交换 技术 的 发 展 历史 看 ,数据 交换 经 历 了 
电路 交换 、 报 文 交换 ,分 组 交换 和 综合 业务 数字 交换 的 发 展 过 程 。 分 组 交换 实质 上 是 在 “ 存 
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储 一 转发 "基础 上 发 展 起 来 的 。 它 兼 有 电路 交换 和 报 文 交 换 的 优点 。 分 组 交换 在 线路 上 采 
用 动态 复 用 技术 传送 按 一 定 长 度 分 割 为 许多 小 段 的 数据 一 一 分 组 。 每 个 分 组 标识 后 ,在 一 
条 物理 线路 上 采用 动态 复 用 的 技术 ,同时 传送 多 个 数据 分 组 。 把 来 自用 户 发 端的 数据 暂 存 
在 交换 机 的 存储 器 内 ,接着 在 网 内 转发 。 到 达 接收 端 , 再 去 掉 分 组 头 将 各 数据 字段 按 顺 序 重 
新 装配 成 完整 的 报 文 。 分 组 交换 比 电路 交换 的 电路 利用 率 高 , 比 报 文 交换 的 传输 时 延 小 , 交 
互 性 好 。 

分 组 交换 网 是 继 电 路 交换 网 和 报 文 交 换 网 之 后 一 种 新 型 交换 网 络 , 它 主要 用 于 数据 通 
信 。 分 组 交换 是 一 种 存储 转发 的 交换 方式 , 它 将 用 户 的 报 文 划分 成 一 定 长 度 的 分 组 ,以 分 组 
为 存储 转发 ,因此 , 它 比 电路 交换 的 利用 率 高 , 比 报 文 交 换 的 时 延 要 小 ,而 具有 实时 通信 的 能 
力 。 分 组 交换 利用 统计 时 分 复 用 原理 ,将 一 条 数据 链 路 复 用 成 多 个 逻辑 信道 ,最 终 构 成 一 条 
主 叫 ,被 叫 用 户 之 间 的 信息 传送 通路 , 称 之 为 虚 电 路 (VC) ,实现 数据 的 分 组 传送 。 

分 组 交换 网 具有 如 下 特点 : 

O 分 组 交换 具有 多 逻辑 信道 的 能 力 , 故 中 继 线 的 电路 利用 率 高 ， 

@ 可 实现 分 组 交换 网 上 的 不 同 码 型 .速率 和 规程 之 间 的 终端 互通 ; 

@ 由 于 分 组 交换 具有 差错 检测 和 纠正 的 能 力 , 故 电路 传送 的 误 码 率 极 小 ; 

@ 分 组 交换 的 网 络 管理 功能 强 。 

分 组 交换 的 基本 业务 有 交换 虚 电路 (SVC) 和 永久 虚 电 路 (PVC) 两 种 。 交 换 虚 电 路 如 同 
电话 电路 一 样 , 即 两 个 数据 终端 要 通信 时 先 用 呼叫 程序 建立 电路 ( 即 虚 电路 ), 然 后 发 送 数 
据 , 通 信 结 束 后 用 拆 线 程序 拆除 虚 电 路 。 永 久 虚 电路 如 同 专线 一 样 , 在 分 组 网 内 两 个 终端 之 
间 在 申请 合同 期 间 提供 永久 逻辑 连接 ,无 须 呼叫 建立 与 拆 线程 序 , 在 数据 传输 阶段 ,与 交换 
虚 电 路 相同 。 

分 组 交换 数据 网 是 由 分 组 交换 机 、 网 路 管理 中 心 .远程 集中 器 、 分 组 装 拆 设备 以 及 传输 
设备 等 组 成 。 


1.1.4 ARPANet 


ARPANet 是 美国 国防 部 高 级 研究 计划 局 DARPA (Defense Advanced Research 
Projects Agency) 建 立 的 ,于 1969 年 投入 使 用 。 建 立 ARPANet 主导 思想 是 : 网 络 必须 能 
够 经 受 住 故 障 的 考验 而 维持 正常 工作 。 一 旦 发 生 战争 , 当 网 络 的 某 一 部 分 因 遭 受 攻击 而 失 
去 工作 能 力 时 ,网 络 的 其 他 部 分 应 当 能 够 维持 正常 通信 。 

1972 4 , ARPANet 在 首届 计算 机 后 台 通 信 国 际会 议 上 与 公众 见面 ,并 验证 了 分 组 交换 
技术 的 可 行 性 ,由 此 ,ARPANet 成 为 现代 计算 机 网 络 诞生 的 标志 。1983 年 , ARPANet 分 
裂 为 两 部 分 : ARPANet 和 纯 军事 用 的 MILNET。 之 后 ,以 ARPANet 为 主干 网 组 成 了 网 
际 互 联网 Internet。 


1.1.5 TCP/IP 结构 模型 


TCP/IP 参考 模型 如 图 1. 1 所 示 ,由 网 络 接口 层 . 互 联网 层 、 传 输 层 . 应 用 层 4 层 组 成 ， 
每 层 功能 如 下 。 
网 络 接口 层 : TCP/IP 模型 的 最 低层 ,负责 接收 从 IP 层 交 来 的 IP 数据 报 并 将 IP 数据 
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报 通过 低层 物理 网 络 发 送出 去 ,或 者 从 低层 物理 网 络 上 接收 物理 帧 ,抽出 IP 数据 报 , 交 给 
IP J. 


TELNET | FTP | SMTP www | | 应 用 层 
TCP UDP 传输 层 
IP 互联 网 层 
ETHERNET| | FDDI X.25 ATM 网 络 接口 层 


图 1.1 TCP/IP 模 型 


互联 网 层 : 负责 相 邻 节点 之 间 的 数据 传送 。 它 的 主要 功能 包括 三 个 方面 。 第 一 ,处 理 
来 自传 输 层 的 分 组 发 送 请 求 : 将 分 组 装 入 IP 数据 报 ,填充 报头 ,选择 去 往 目 的 节点 的 路 径 ， 
然后 将 数据 报 发 往 适当 的 网 络 接口 ; 第 二 ,处 理 输入 数据 报 : 首先 检查 数据 报 的 合法 性 , 然 
后 进行 路 由 选择 ,假如 该 数据 报 已 到 达 目 的 节点 (本 机 ), 则 去 掉 报 头 ,将 IP 报 文 的 数据 部 分 
交 给 相应 的 传输 层 协议 ; 假如 该 数据 报 尚未 到 达 目 的 节点 , 则 转发 该 数据 报 ; 第 三 ,处 理 
ICMP 报 文 : 即 处 理 网 络 的 路 由 选择 ,流量 控制 和 拥塞 控制 等 问题 。TCPV/IP 网 络 模型 的 互 
联网 层 在 功能 上 非常 类 似 于 OSI 参考 模型 中 的 网 络 层 。 

传输 层 : 在 源 节点 和 目的 节点 的 两 个 进程 实体 之 间 提 供 可 靠 的 端 到 端的 数据 传输 。 为 
保证 数据 传输 的 可 靠 性 ,传输 层 协 议 规定 接收 端 必须 发 回 确认 ,并 且 假 定 分 组 丢失 ,必须 重 
新 发 送 。TCP/IP 模型 提供 了 两 个 传输 层 协 议 : 传输 控制 协议 TCP 和 用 户 数据 报 协 
议 UDP。 

应 用 层 : TCP/IP 模型 没有 会 话 层 和 表示 层 。 应 用 层 包含 所 有 的 高 层 协议 ,如 虚拟 终端 
协议 (TELNET) ,文件 传输 协议 (FTP) 和 电子 邮件 协议 (SMTP) 等 。 

TCP/IP 将 不 同 的 底层 物理 网 络 .拓扑 结构 隐藏 起 来 ,向 用 户 和 应 用 程序 提供 通用 的 、 
统一 的 网 络 服务 。 这 样 ,从 用 户 的 角度 看 ,整个 TCP/IP 互联 网 就 是 一 个 统一 的 整体 , 它 独 
立 于 各 种 具体 的 物理 网 络 技术 ,能够 向 用 户 提供 一 个 通用 的 网 络 服务 ,如 图 1. 2 所 示 。 在 某 
种 意义 上 ,可 以 把 这 个 单一 的 网 络 看 作 一 个 虚拟 网 : 在 逻辑 上 它 是 独立 的 、 统 一 的 ,在 物理 
上 它 则 是 由 不 同 的 网 络 互联 而 成 。 将 TCP/IP 互联 网 看 作 单 一 网 络 的 观点 , 极 大 地 简化 了 
细节 ,使 用 户 极 容 易 建 立 起 TCP/IP 互联 网 的 概念 。 

TCP/IP 互联 网 还 有 一 个 基本 思想 : 即 任何 一 个 能 传输 数据 分 组 的 通信 系统 , 均 可 被 看 
作 是 一 个 独立 的 物理 网 络 , 这 些 通信 系统 均 受 到 互联 网 协议 的 平等 对 待 。 大 到 广域网 、 小 
到 LAN, 甚 至 两 台 机 器 之 间 的 点 对 点 专线 以 及 拨号 电话 线路 都 被 当 作 网 络 ,这 就 是 互联 
网 的 网 络 对 等 性 。 网 络 对 等 性 为 协议 设计 者 提供 了 极 大 的 方便 ,大 大 简化 了 对 异 构 网 的 
处 理 。 

可 见 ,TCP/IP 网 络 完全 撤 开 了 底层 物理 网 络 的 特性 ,是 一 个 高 度 抽象 的 概念 , 正 是 这 
一 抽象 的 概念 ,为 TCP/IP 网 络 赋予 了 巨大 的 灵活 性 和 通用 性 。 
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虚拟 互联 网 (IP 网 ) 


服务 器 z = 服务 器 
en 用 户 生机 和 器 On 用 户 生 机 
(a 实际 物理 连接 的 互联 网 O 用 户 看 到 的 虚拟 互联 网 
图 1.2 TCP/IP 互联 网 用 户 视图 和 内 部 结果 
1.1.6 IP 地址 


在 TCP/IP 体系 中 ,IP 地 址 是 一 个 最 基本 的 概念 。 有关 IP 最 重要 的 文档 就 是 [RFC791]， 
它 很 早 就 成 为 了 因特网 的 正式 标准 。 


1. IP 地 址 及 其 表示 方法 


IP 地 址 就 是 给 每 个 连接 在 因特网 上 的 主机 (或 路 由 器 ) 分 配 一 个 在 全 世界 范围 是 唯一 
的 32b 的 标识 符 。IP 地 址 现在 由 因特网 名 字 与 号 码 指 派 公 司 ICANN (Internet 
Corporation for Assigned Names and Numbers) 进 行 分 配 ,IP 地 址 的 编码 方法 共 经 过 了 三 
个 历史 阶段 ,这 三 个 阶段 是 : 

(1) 分 类 IP 地 址 。 这 是 最 基本 的 编 址 方法 ,在 1981 年 就 通过 了 相应 的 标准 协议 。 

(2) 子 网 的 划分 。 这 是 对 最 基本 的 编 址 方法 的 改进 ,其 标准 (RFC950) 在 1985 年 通过 。 

(3) 构成 超 网 。 这 是 比较 新 的 无 分 类 编 址 方法 。1993 年 提出 后 很 快 就 得 到 推广 应 用 。 

所 谓 “ 分 类 的 IP 地 址 ?就 是 将 IP 地 址 划分 为 若干 个 固定 类 ,每 一 类 地 址 都 由 两 个 固定 
长 度 的 字段 组 成 ,其 中 一 个 字段 是 网 络 号 net-id, 标 志 主 机 (或 路 由 器 ) 所 连接 到 的 网 络 ,而 
另 一 个 字段 则 是 主机 号 host-id, 标 志 该 主机 (或 路 由 器 )。 这 种 两 级 的 IP 地 址 可 以 记 为 ; 


IP 地 址 = {< 网 络 号 >,< 主 机 号 >} 


图 1.3 给 出 了 各 种 IP 地 址 的 网 络 号 字段 和 主机 号 字段 ,这 里 A 类.B 类 和 C 类 地 址 是 
最 常用 的 。 

从 图 1.3 可 以 看 出 : 

A) A 类 .B 类 和 C 类 地 址 网 络 号 字段 net-id( 在 网 络 中 这 个 字段 是 灰色 的 ) 长 度 分别 是 
1.2 和 3 字 节 长 ,而 在 网 络 号 字段 的 最 前 面 有 1~ 3b 的 类 别 比特 ,其 数值 分 别 规定 为 0,10 
和 110。 

(2) A 类.B 类 和 C 类 地 址 的 主机 号 字段 长 度 分 别 为 3B、2B 和 1B. 

路 由 器 为 转发 分 组 而 查找 转发 表 时 ,很 重要 的 一 点 就 是 查找 路 由 表 花 费 的 时 间 要 尽量 
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A 类 地 址 [0 

[T netid 8b 一 nost-id 24b d 
B 类 地 址 [10 : 

~net-id 166-1 hostd16b = 
C 类 地 址 (110 | 

m net-id24b T host- = 
D 类 地 址 [AO : 多 播 地 下 ] 
E 类 地 址 110 7 保留 为 今后 便 用 ] 


图 1.3 耳 地 址 中 的 网 络 号 字段 和 主机 号 字段 


短 。 如 果 把 所 有 目的 主机 的 路 由 全 都 写 人 到 路 由 表 中 ,就 会 有 很 多 路 由 是 重复 的 ,因此 没有 
必要 这 样 做 。 我 们 应 将 重复 的 路 由 合并 。 路 由 表 只 使 用 IP 地 址 中 的 网 络 号 net-id 来 查找 
路 由 。 只 要 IP 数据 报 能 够 正确 到 达 目 的 网 络 ,就 可 在 这 个 网 络 上 直接 交付 目的 主机 而 不 再 
需要 经 过 其 他 路 由 器 进行 转发 了 。 因 此 ,路 由 器 转发 分 组 的 步 又 如 下 : 

(1) 先 按 所 要 找 的 IP 地 址 中 的 网 络 号 net-id 把 目的 网 络 找到 。 虽 然 IP 地 址 的 网 络 字 
段 有 三 种 不 同 的 长 度 , 但 根据 IP 地 址 中 最 前 面 的 类 别 比 特 , 就 可 以 很 容易 地 确定 网 络 字段 
的 准确 字 节 数 。 

(2) 当 分 组 到 达 目 的 网 络 后 ,利用 主机 号 host-id 将 数据 报 直 接 交 付 给 目的 主机 。 

按照 整数 字 节 划 分 net-id 字段 ,可 以 使 路 由 器 在 收 到 一 个 分 组 时 能 够 更 快 地 将 地 址 中 
的 网 络 号 提取 出 来 。 

将 IP 地址 划分 为 三 个 类 别 , 当 初 是 这 样 考虑 的 。 各 种 网 络 的 差异 很 大 ,有 的 网 络 拥有 
很 多 主机 ,而 有 的 网 络 上 的 主机 则 很 少 ,将 IP 地 址 划分 为 A 类 、B 类 和 C 类 可 以 更 好 地 满 
足 不 同 用 户 的 要 求 。A 类 IP 地 址 的 网 络 号 数 不 多 ,现在 能 够 申请 到 的 IP 地 址 只 有 B 类 和 
C 类 两 种 。 

除 上 述 的 三 类 IP 地 址 外 ,还 有 两 类 使 用 较 少 的 地 址 , 即 D 类 和 下 类 地 址 。D 类 地 址 是 
多 播 地 址 ,E 类 地 址 保留 。 

在 主机 或 路 由 器 中 存放 的 IP 地 址 都 是 32b 的 二 进 制 代 码 。 为 了 提高 可 读 性 ,在 写 
人 看 的 IP 地 址 时 ,往往 每 隔 Sb 插入 一 个 空格 。 但 这 样 还 是 不 方便 ,于 是 常常 将 32b 的 IP 
地 址 中 的 每 8b 用 等 效 的 十 进 制 数字 表示 ,并且 在 这 些 数字 之 间 加 上 一 个 点 ,这 就 叫做 点 分 
十 进 制 记 法 (Dotted Decimal Notation). K| 1. 4 表示 了 这 种 方法 ,这 是 一 个 B 类 IP 地址。 
显然 ,128. 11. 3. 31 EE 10000000 00001011 00011111 读 起 来 要 方便 得 多 。 


第 一 个 可 用 | 最 后 一 个 可 | 每 个 网 络 中 最 


ken | See 的 网 络 号 用 的 网 络 号 | 大 的 主机 数 


A 126(2’ 一 2) 1 126 16 777 214 
B 16 384(2") 128.0 191. 255 65 534 
Cc 2097 152(2") 192.0.0 223. 225. 255 254 


图 1.4 采用 点 分 十 进 制 记 法 能 够 提高 可 读 性 
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2. 常用 的 三 种 类 别 的 IP 地 址 


下 面 我 们 再 对 A 类 、B 类 和 C 类 地 址 进行 较 深 入 的 讨论 。 

A 类 地 址 的 net-id 字段 占 一 个 字 节 ,只 有 7 个 比特 可 供 使 用 (该 字段 的 第 一 个 比特 已 固 
定 为 0) ,但 可 提供 使 用 的 网 络 号 是 126 个 ( 即 2 一 2)。 沽 2 的 原因 是 : 第 一 ,IP 地 址 中 的 全 
0 表示 “这 个 ”。Net-id 字段 为 全 0 的 IP 地址 是 个 保留 地 址 ,意思 是 “本 网 络 ”。 第 二 ,net-id 
字段 为 127( 即 01111111) 保 留 作为 本 地 软件 环 回 测试 (Loopback Tesk) 本 主机 之 用 (后 面 三 
个 字 节 的 二 进 制 数字 可 任意 填 人 ,但 不 能 都 是 0 或 都 是 1, 即 除了 127. 0. 0.0 和 127, 255. 
255. 255 以 外 都 可 以 用 )。A 类 地 址 的 host-id 字段 为 3 个 字 节 ,因此 每 一 个 A 类 网 络 中 的 
最 大 主机 数 是 16 777 214( 即 22 一 2)。 这 里 减 2 的 原因 是 : 全 0 的 host-id 字段 表示 该 了 地 
址 是 “本 主机 ?所 连接 到 的 单个 网 络 地 址 (例如 ,一 个 主机 的 IP 地 址 为 5. 6.7.8, 则 该 主机 所 
在 的 网 络 地 址 就 是 5. 0.0. 0) ,而 全 1 表示 “所 有 的 ”。 因 此 全 1 的 host-id 字段 表示 网 络 上 的 
所 有 主机 。 

整个 A 类 地 址 空间 共有 2° CH 2 147 483 648) 个 地 址 ,而 IP 地 址 全 部 的 地 址 空间 共有 
22( 即 4294967 296) 个 地 址 。 可 见 A 类 地 址 占有 整个 IP 地 址 空间 的 50% 。 

B 类 地 址 的 net-id 字段 有 2 字 节 ,但 前 面 两 个 比特 (1 0) 已 经 固定 了 ,只 剩 下 14 个 比特 
可 以 变化 ,因此 B 类 地 址 的 网 络 数 为 16 384( 即 214)。 请 注意 ,这 里 不 存在 减 2 的 问题 , 因 
为 net-id 字段 最 前 面 的 两 个 比特 (1 0) 使 得 后 面 的 14 个 比特 无 论 怎样 排列 也 不 可 能 出 现 使 
整个 2 字 节 net-id 字段 成 为 全 0 或 全 1。B 类 地 址 的 每 一 个 网 络 上 的 最 大 主机 数 是 65 534 
( 即 25 一 2)。 这 里 需要 减 2 是 因为 要 扣除 全 0 和 全 1 的 主机 号 。 整 个 B 类 地 址 空间 共有 
1073 741 824( 即 2”) 个 地 址 , 占 整个 IP 地 址 空间 的 25%. 

C 类 地 址 有 3 个 字 节 的 net-id 字段 ,最 前 面 的 3 个 比特 是 (1 1 0) ,还 有 21 个 比特 可 以 
变化 ,因此 C 类 地 址 的 网 络 总 数 是 2 097 152( 即 22 ,这 里 不 需要 减 2)。 每 一 个 C 类 地 址 的 
最 大 主机 数 是 254( 即 2 一 2) 。 整 个 C 类 地 址 空间 共有 536 870 912( 即 2”) 个 地 址 , 占 整 个 
IP 地 址 的 12.5% ,这 样 就 可 得 出 表 1. 1 所 示 的 TP 地 址 的 使 用 范围 。 


表 1.1 IP 地 址 的 使 用 范围 


第 一 个 可 用 最 后 一 个 可 每 个 网 络 中 最 
网 络 类 别 最 大 网 络 数 uh 
的 网 络 号 用 的 网 络 号 大 的 主机 数 
A 126(27 一 2) it 126 16 777 214 
B 16 384(2") 128.0 191. 255 65 534 
Cc 2 097 152(27!) 192. 0. 0 223. 225. 255 254 


IP 地 址 具有 以 下 一 些 重要 的 特点 : 

(1) 每 一 个 IP 地址 都 由 网 络 号 和 主机 号 两 部 分 组 成 。 从 这 个 意义 上 说 ,IP 地 址 是 一 种 
分 层 的 地 址 结构 。 分 两 个 层次 的 好 处 是 : 第 一 ,IP 地 址 管理 机 构 在 分 配 IP 地 址 时 只 分 配 网 
络 号 (第 一 级 ) ,而 剩 下 的 主机 号 (第 二 级 ) 则 由 得 到 该 网 络 号 的 单位 自行 分 配 。 这 样 就 方便 
了 IP 地 址 的 管理 。 第 二 ,路 由 器 仅 根 据 目的 主机 所 连接 的 网 络 号 来 转发 分 组 (而 不 考虑 目 
的 主机 号 ) ,这 样 就 可 以 使 路 由 表 中 的 项 目 数 大 幅度 减少 ,从 而 减少 了 路 由 表 所 占 的 存储 


空间 。 
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(2) 实际 上 IP 地 址 是 标志 一 个 主机 (或 路 由 器 ) 和 一 条 链 路 的 接口 。 当 一 个 主机 同时 
连接 到 两 个 网 络 上 时 ,该 主机 就 必须 同时 具有 两 个 相应 的 IP 地 址 ,其 网 络 号 net-id 必须 是 
不 同 的 。 这 种 主机 称 为 多 接口 主机 (Multihomed Host) 。 由 于 一 个 路 由 器 至 少 应 当 连 接 到 
两 个 网 络 ,因此 一 个 路 由 器 至 少 应 当 有 两 个 不 同 的 IP 地 址 。 

(3) 按照 因特网 的 观点 ,用 转发 器 或 网 桥 连接 起 来 的 若干 个 局 域 网 仍 为 一 个 网 络 ,因为 
这 些 局 域 网 都 具有 同样 的 网 络 号 net-id。 

(4) 在 IP 地址 中 ,所 有 分 配 到 网 络 号 net-id 的 网 络 都 是 平等 的 。 

图 1.5 夯 出 了 3 个 局 域 网 (LAN1、LAN2 和 LAN3) 通 过 3 个 路 由 器 (R1、R2、 和 R3) 互 
连 起 来 所 构成 的 一 个 互联 网 (此 互联 网 用 虚线 圆 角 方 框 表示 )。 其 中 局 域 网 LAN2 是 两 个 
网 段 通过 网 桥 B 互 连 的 。 图 中 的 小 圆圈 表示 需要 有 一 个 IP 地 址 。 


2 2.2... 
| | | 


LAN2222.1.2. 


LAN; 222.1.1. 


9 222.1.1.4 


222.1.2.3" 222.1.2.4 


图 1.5 互联 网 中 的 IP 地 址 


注意 : 

(1) 在 同一 个 局 域 网 上 的 主机 或 路 由 器 的 IP 地 址 中 的 网 络 号 必须 是 一 样 的 。 图 1.5 
中 所 示 的 网 络 号 就 是 IP 地 址 中 的 net-id, 这 也 是 文献 中 常见 的 一 种 表示 方法 。 另 一 种 表示 
方法 是 用 主机 号 host-id 为 全 0 的 网 络 IP 地 址 。 

(2) 用 网 桥 ( 它 只 在 链 路 层 工 作 ) 互 连 的 网 段 仍 然 是 一 个 局 域 网 ,只 能 有 一 个 网 络 号 。 
路 由 器 总 是 具有 两 个 或 两 个 以 上 的 IP 地址 。 即 路 由 器 的 每 一 个 接口 都 有 一 个 不 同 网 络 号 
的 IP 地 址 。 

(3) 当 两 个 路 由 器 直接 相连 时 ,在 连 线 两 端的 接口 处 ,可 以 指明 也 可 以 不 指明 IP 地 址 。 
如 指明 了 IP 地址 , 则 这 一 段 连 线 就 构成 了 一 种 只 包含 一 段 线 路 的 特殊 “网 络 ”( 如 图 中 的 
N1,N2 和 N3), 之 所 以 叫做 "网络" 是 因为 它 有 IP 地址 ,但 为 了 节省 IP 地 址 资源 ,对 于 这 种 
由 一 段 连 线 构成 的 特殊 “网 络 ” 现 在 也 常常 不 指明 IP 地 址 。 
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1.1.7 DNS 域名 系统 


早期 的 因特网 使 用 平坦 (Flat) 名 字 空 间 , 即 主机 名 (Host Name) 没 有 层次 关系 ,其 优点 
是 名 字 简 短 。 在 ARPANET 时 代 , 整 个 网 络 上 只 有 数 百 台 主 机 ,主机 中 都 保存 一 个 hosts 
的 文件 ,其 中 列 出 了 所 有 主机 名 字 和 相应 的 IP 地 址 ,至 今 在 一 些 网 络 操作 系统 中 都 还 保存 
了 这 种 机 制 。 随 着 因特网 上 的 用 户 数 急剧 增加 ,这 种 平坦 (Flat) 的 名 字 空 间 已 经 不 能 满足 
需要 ,因此 DNS 域名 采用 层次 化 的 名 字 空 间 。 采 用 这 种 命名 方法 ,任何 一 台 连 接 在 因特网 
上 的 主机 或 路 由 器 ,都 有 一 个 唯一 的 层次 结构 的 名 字 , 即 域名 (Domain Name). 

域名 的 结构 由 若干 个 分 量 组 成 ,各 分 量 之 间 用 点 隔 开 : 

… 三 级 域名 . 二 级 域名 . 顶级 域名 

各 分 量 代表 不 同 级 别 的 域名 。 每 一 级 的 域名 都 由 英文 字母 和 数字 组 成 (不 超过 63 个 字 
符 , 并 忽略 大 小 写 ) ,级 别 最 低 的 域名 写 在 最 左边 ， pe te 
最 右边 。 完 整 的 域名 不 超过 255 个 字符 。 域 名 只 是 一 个 逻辑 概念 ,并 不 代表 计算 机 的 物理 
地 点 。 ww 

假设 郑州 轻工业 学 院 的 一 台 服 务 器 www. zzuli. edu. cn, 其 中 cn 是 顶级 域名 ; edu 是 二 
级 域名 ; zui 是 三 级 域名 。 该 学 院 拥 有 zzuli. edu. cn 域名 及 其 以 下 的 所 有 名 字 空 间 ,其 中 
www 是 该 学 院 是 一 台 服 务 器 的 主机 名 。 

域名 有 了 层次 结构 ,就 可 以 采用 层次 结构 管理 的 方法 对 Internet 上 的 域名 进行 管理 ,不 
需要 每 个 DNS 服务 器 都 知道 Internet 上 所 有 的 域名 ,一 个 名 称 服务 器 可 以 把 它 的 一 部 分 名 
称 服务 “委托 ”给 子 服务 器 ,从 而 实现 名 字 空 间 的 层次 结构 。 

因特网 全 球 域名 服务 系统 (InterDNS) 由 InterNIC 管理 ,InterDNS 名 字 空 间 是 一 种 树 
状 结构 , 它 指定 了 一 个 用 于 组 织 名 称 的 结构 化 的 层次 式 域名 空间 。 树 状 结构 的 国际 互联 网 
的 域名 体系 如 图 1.6 所 示 。 


地 理 顶 级 域名 类 别 项 级 域名 新 增 项 级 域名 
类 别 域名 A 区 域名 


EAS sa 


图 1.6 国际 互联 网 域名 体系 


顶级 域名 由 InterNIC 或 相关 的 管理 机 构 进行 管理 ,目前 顶级 域名 共 分 为 三 类 ， 

第 一 类 是 类 别 顶 级 域名 ,共有 7 个 ,也 就 是 现在 通常 说 的 国际 域名 。 由 于 Internet 最 初 
是 发 源 于 美国 ,因此 最 早 的 域名 并 无 国家 标识 ,人 们 按 用 途 把 它们 分 为 几 个 大 类 ,它们 分 别 
以 不 同 的 后 级 结尾 ;. com( 用 于 商业 公司 ); . net( 用 于 网 络 服务 ); . org( 用 于 组 织 协会 等 ); 
.gov( 用 于 政府 部 门 ); .edu( 用 于 教育 机 构 ); . mil( 用 于 军事 领域 ) ; . int( 用 于 国际 组 织 ) 
最 初 的 域名 体系 也 主要 供 美国 使 用 ,因此 美国 的 企业 、 机 构 ,政府 部 门 等 所 用 的 都 是 “国际 域 
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名 ”, 随 着 Internet 向 全 世界 的 发 展 ,. edu. gov、. mil 一 般 只 被 美国 专用 外 ,另外 三 类 常用 
的 域名 . com、. org、 net 则 成 为 全 世界 通用 ,因此 这 类 域名 通常 称 为 “国际 域名 ”, 直 到 现在 
仍然 为 世界 各 国 所 使 用 。 上 述 7 个 顶级 域名 由 InterNIC 负责 管理 。 

第 二 类 是 地 理 顶 级 域名 ,共有 243 个 国家 和 地 区 的 代码 ,例如 . cn 代表 中 国 ,. uk 代表 英 
国 。 这 样 以 . cn 为 后 级 的 域名 就 相应 地 叫做 “国内 域名 ”。 由 各 国 的 互联 网 管理 机 构 自 行 
管理 。 

与 国际 域名 的 后 级 命名 类 似 , 在 . cn 顶级 域名 下 也 分 设 了 不 同意 义 的 二 级 域 ,主要 包括 
类 别 域 和 行政 区 域 .这 样 就 是 通常 说 的 二 级 域名 : 

类 别 域名 是 依照 申请 机 构 的 性 质 划 分 出 来 的 域名 ,具体 包括 : 

AC 科研 机 构 ， 

COM 工商 、 金 融 等 企业 ; 

EDU 教育 机 构 ; 

GOV 政府 部 门 ; 

NET 互联 网 络 . 接 和 人 网 络 的 信息 中 心 C(NIC) 和 运行 中 心 CNOC); 

ORG 各 种 非 盈 利 性 的 组 织 。 

行政 区 划 域 名 是 按照 中 国 的 各 个 行政 区 划 划 分 而 成 的 ,其 划分 标准 依照 原 国 家 技术 监 
督 局 发 布 的 国家 标准 而 定 ,包括 “行政 区 域名 ”34 个 ,适用 于 我 国 的 各 省 .自治 区 直辖 市 。 
例如 北京 的 机 构 可 以 选择 如 cnnic. bj. cn 的 域名 。 


中 国 行政 区 域名 举例 : 

BJ- 北 京 市 ; SH- 上 海 市 ; TJ- 天 津 市 ; 

CQ- 重 庆 市 ; HE- 河 北 省 ; SX- 山 西 省 ; 
NM- 内 蒙古 自治 区 ; LN- 辽 宁 省 ; JI- 吉 林 省 ; 

HL- 黑 龙 江 省 ; JS- 江 苏 省 ; IJ- 浙江 省 ; 

AH- 安 徽 省 ; FJ- 福 建 省 ; JX- 江 西 省 ; 

SD- 山 东 省 ; HA- 河 南 省 ; TW- 台 湾 省 ; 
HK- 香 港 ; MORI. ttt ee 


第 三 类 顶级 域名 ,也 就 是 所 谓 的 “新 项 级 域名 ”, 是 ICANN 根据 互联 网 发 展 需要 ,在 
2000 年 11 月 做 出 决议 ,从 2001 年 开始 使 用 的 国际 顶级 域名 ,也 包含 7 类 : biz,info,name， 
pro,aero,coop,museum。 其 中 前 4 个 是 非 限制 性 域 ,后 3 个 是 限制 性 域 ,如 aero 需 是 航空 
业 公司 注册 ,museum 需 是 博物 馆 注 册 ,coop 需 是 集体 企业 ( 非 投 资 人 控制 ,无 须 利润 最 大 
化 ) 注 册 。 这 7 个 顶级 域名 的 含义 和 注册 管理 机 构 如 下 : 

. aero, 航 空运 输 业 专用 ,由 比利时 国际 航空 通信 技术 协会 (SITA) 负 责 ; 

.biz, 可 以 替代 . com 的 通用 域名 ,监督 机 构 是 JVTeam; 

.coop, 商 业 合 作 社 专用 ,由 位 于 华盛顿 的 美国 全 国 合作 商业 协会 (NCBA) 负 责 管理 ; 

.info, 可 以 替代 . net 的 通用 域名 ,由 19 个 因特网 域名 注册 公司 联合 成 立 的 Afilias 负责 ; 

. museum, 博 物 馆 专 用 ,由 博物 馆 域名 管理 协会 (MDMA) 监 督 ; 

.name, 个 人 网 站 的 专用 域名 ,由 英国 的 “环球 姓名 注册 ”(Globe Name Registry) 负 责 ; 

. pro, 医 生 和 律师 等 职业 专用 ,监督 机 构 是 爱尔兰 都 柏林 的 一 家 网 络 域名 公司 “职业 注 
Jt” (Registry Pro). 
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E 万 维 网 与 浏览 器 


1.2.1 万 维 网 


万 维 网 (World Wide Web) 是 环球 信息 网 ,缩写 为 WWW, 也 可 以 简称 为 Web。 万维网 
是 一 个 资料 空间 。 在 这 个 空间 中 ; 一 样 有 用 的 事物 , 称 为 一 样 “ 资 源 ”; 并 且 由 一 个 全 域 “ 统 
一 资源 标识 符 ”(URL) 标 识 。 这 些 资 源 通 过 超 文 本 传输 协议 (Hypertext Transfer Protocol) 
传送 给 使 用 者 ,而 后 者 通过 单 击 链 接 来 获得 资源 。 从 另 一 个 观点 来 看 ,万 维 网 是 一 个 透 过 网 
络 存 取 的 互 连 超 文 件 (Interlinked Hypertext Document) 系统。 

万 维 网 由 欧洲 原子 核 研究 委员 会 CERN (the European Laboratory for Particle 
Physics, CERN 是 法 文 缩写 ) 委 员 蒂 姆 。 伯 纳 斯 (Tim Berners-Lee) 于 1989 年 3 月 提出 的 一 
种 基于 Internet 的 信息 服务 系统 ,目的 是 使 分 散在 欧洲 各 国 的 物理 学 家 能 够 通过 计算 机 网 
络 合作 进行 科学 研究 ,使 分 散在 各 地 物理 实验 室 的 信息 能 被 共享 。1991 年 ,CERN 向 世界 
公布 了 WWW 技术 ,WWW 的 出 现 立 即 在 世界 上 引起 友 动 。 万 维 网 联盟 (World Wide Web 
Consortium, W3C) ,又 称 W3C 理事 会 。1994 年 10 月 在 拥有 “世界 理工 大 学 之 最 ”称号 的 麻 
省 理工 学 院 (MIT) 计 算 机 科学 实验 室 成 立 , 建 立 者 是 万 维 网 的 发 明 者 带 姆 ， 伯 纳 斯 . 李 。 

查看 万 维 网 必须 使 用 相应 的 软件 一 一 浏览 器 (Browser)。 第 一 个 图 形 化 Web 浏览 器 是 
美国 国家 超级 计算 机 应 用 中 心 CNCSA) 的 马克 。 安德森 (Mark Anderson) F 1993 年 2 月 在 
Windows 环境 下 开发 出 的 MOSAIC 浏览 器 。MOSAIC 基本 上 类 似 于 现在 的 浏览 器 软件 ， 
它 解 决 了 远程 信息 服务 中 的 文字 显示 ` 数 据 连 接 以 及 图 像 传 递 等 问题 ,这 比 起 最 初 的 基于 字 
符 界 面 的 浏览 器 来 说 是 一 个 巨大 的 进步 。MOSAIC 的 出 现 和 广泛 使 用 大 大 推动 了 万 维 网 
的 发 展 , 使 万 维 网 迅速 风靡 全 世界 。1995 年 著名 的 Netscape Navigator 浏览 器 上 市 。 此 后 
微软 公司 推出 了 Internet Explorer(" 探 路 者 ”, 通 常 简称 IE) ,并 在 它 的 Windows 操作 系统 
中 捆绑 发 布 ,成 为 最 主要 的 Web 浏览 器 。 

万 维 网 的 出 现 , 使 因特网 成 为 普通 人 也 能 利用 的 信息 资源 库 , 因 特 网 上 的 Web 网 站 点 
数 呈 指数 规律 增长 。 据 统计 ,在 1998 年 ,万 维 网 的 通信 量 已 超过 整个 因特网 上 通信 量 的 
75% 今 天 , Web 已 经 是 Internet 中 被 使 用 最 多 的 部 分 ,以 至 于 给 人 的 感觉 是 Web 就 是 
Internet。 因 此 ,万 维 网 的 出 现 是 因特网 发 展 中 一 个 非常 重要 的 里 程 碑 。 


1.2.2 万 维 网 分 布 式 服务 特点 


万 维 网 用 链接 的 方法 将 不 同 的 信息 资源 连接 到 一 起 ,使 用 户 能 非常 方便 地 从 因特网 上 
的 一 个 站 点 访问 另 一 个 站 点 (也 就 是 所 谓 的 “链接 到 男 一 个 站 点 ”) ,从 而 主动 地 按 需 获取 让 
富 的 信息 。 图 1.7 展示 了 万 维 网 站 点 之 间 的 典型 链接 方式 。 

图 中 的 万 维 网 站 点 可 以 相隔 数 千 公 里 ,每 一 个 万 维 网 站 点 都 存放 着 许多 文档 ,在 这 些 文 
档 中 有 一 些 地 方 的 文字 是 用 区 别 于 其 他 文字 的 方式 显示 的 ( 当 我 们 将 鼠标 移动 到 这 些 地 方 
时 ,鼠标 的 箭头 就 变 成 了 一 只 手 的 形状 ) ,表明 这 些 地 方 有 一 个 链接 ,这 些 文档 相互 链接 ,成 
为 一 个 “网 ” 状 结构 。 用 户 只 要 单 击 鼠 标 , 就 可 以 通过 一 个 文档 链接 到 可 能 相隔 很 远 的 另 一 
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个 文档 ,浏览 到 世界 任何 地 方 的 万 维 网 资源 。 


Sy) ~~~ genes) ~ 
万 维 网 站 点 A > 


万 维 网 站 点 E 


万 维 网 站 点 D 
图 1.7 万 维 网 站 点 之 间 的 链接 


1.2.3 万 维 网 的 工作 方式 


WWW 系统 的 基本 组 成 包括 服务 器 .浏览 器 .网 页 和 传输 协议 。 

万 维 网 文档 所 驻 留 的 计算 机 和 运行 着 万 维 网 服务 程序 ,因此 这 个 计算 机 被 称 为 万 维 网 服 
务 器 或 Web 服务 器 ,是 网 站 的 主要 组 成 部 分 。 

浏览 器 是 在 用 户 计算 机 上 的 万 维 网 客户 程序 , 它 的 作用 是 为 用 户 提供 一 个 人 机 接口 , 即 
操作 界面 ,用 户 通过 浏览 器 输入 需要 访问 网 页 的 网 址 ,浏览 器 则 将 用 户 输 入 的 网 址 提交 给 网 
址 中 指定 的 网 站 。 浏 览 器 收 到 网 站 传送 过 来 的 网 页 后 ,加 以 解释 、 执 行 ,并 将 结果 在 屏幕 上 
显示 出 来 ,成 为 用 户 平常 所 见 的 漂亮 网 页 。 

网 页 由 HTML(Hyper Text Markup Language) 语 言 编 写 而 成 ,也 可 称 为 HTML 文 
档 , 网 页 中 可 以 嵌入 文字 图片 .声音 .视频 等 丰富 的 多 媒体 信息 。 网 页 之 间 通 过 超 链接 链接 
到 一 块 , 超 链接 就 是 网 页 的 地 址 ,因此 网 页 可 以 理解 为 超 文本 系统 中 的 一 个 节点 。 网 页 存放 
在 网 站 服务 器 上 ,其 扩展 名 一 般 是 : HTM,HTML,ASP,PHP 等 。 


E C/S 5 B/S 结构 


1.3.1 C/S 结构 


C/S(Client/Server) 结 构 , 即 大 家 熟知 的 客户 机 和 服务 器 结构 。 它 是 软件 系统 体系 结 
构 , 通 过 它 可 以 充分 利用 两 端 硬件 环境 的 优势 ,将 任务 合理 分 配 到 Client 端 和 Server 端 来 
实现 ,降低 了 系统 的 通信 开销 。 目 前 大 多 数 应 用 软件 系统 都 是 Client/Server 形式 的 两 层 结 
构 ,由 于 现在 的 软件 应 用 系统 正在 向 分 布 式 的 Web 应 用 发 展 ,Web 和 Client/Server 应 用 都 
可 以 进行 同样 的 业务 处 理 , 应 用 不 同 的 模块 共享 逻辑 组 件 。 因 此 ,内 部 的 和 外 部 的 用 户 都 可 
以 访问 新 的 和 现 有 的 应 用 系统 ,通过 现 有 应 用 系统 中 的 逻辑 可 以 扩展 出 新 的 应 用 系统 ,这 也 
是 目前 应 用 系统 的 发 展 方向 。 

C/S 结构 的 基本 原则 是 将 计算 机 应 用 任务 分 解 成 多 个 子 任务 ,由 多 台 计 算 机 分 工 完成 ， 
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即 采用 “功能 分 布 ? 原 则 。 客 户 端 完成 数据 处 理 ,数据 表示 以 及 用 户 接口 功能 ; 服务 器 端 完 
成 DBMS 的 核心 功能 。C/S 结构 的 优点 是 能 充分 发 挥 客户 端 PC 的 处 理 能 力 ,很 多 工作 可 
以 在 客户 端 处 理 后 再 提交 给 服务 器 。 对 应 的 优点 就 是 客户 端 响应 速度 快 。 缺 点 主要 有 : 
中 只 适用 于 局 域 网 。 而 随 着 互联 网 的 飞速 发 展 ,移动 办 公 和 分 布 式 办 公 越 来 越 普及 ,这 需要 
系统 具有 扩展 性 。 这 种 方式 远程 访问 需要 专门 的 技术 ,同时 要 对 系统 进行 专门 的 设计 来 处 
理 分 布 式 的 数据 。 四 客户 端 需要 安装 专用 的 客户 端 软件 。 首 先 涉及 到 安装 的 工作 量 , 其 次 
任何 一 台电 脑 出 问题 ,如 病毒 .硬件 损坏 ,都 需要 进行 安装 或 维护 。 特 别 是 有 很 多 分 部 或 专 
卖 店 的 情况 ,不 是 工作 量 的 问题 ,而 是 路 程 的 问题 。 还 有 ,系统 软件 升级 时 ,每 一 台 客 户 机 需 
要 重新 安装 ,其 维护 和 升级 成 本 非常 高 。 回 对 客户 端的 操作 系统 一 般 会 有 限制 。 可 能 适应 
于 Windows 7、Windows 8 或 Windows XP, 却 不 适用 于 微软 新 的 操作 系统 ,更 不 用 说 
Linux, UNIX 等 。 

C/S 架构 软件 的 优势 是 应 用 服务 器 运行 数据 负荷 较 轻 ,数据 的 储存 管理 功能 较为 透明 。 
劣势 是 高 昂 的 维护 成 本 ,大 投资 ,以 及 需要 针对 不 同 的 操作 系统 开发 不 同 版 本 的 软件 ,由 于 
产品 的 更 新 换代 十 分 快 ,高 代价 和 低 效率 已 经 不 适应 工作 需要 。 


1.3.2 B/S 结构 


B/S(Browser/Server, 浏 览 器 /服务 器 模式 ) 结 构 是 Web 兴起 后 的 一 种 网 络 结构 模式 ， 
Web 浏览 器 是 客户 端 最 主要 的 应 用 软件 。 这 种 模式 统一 了 客户 端 ,将 系统 功能 实现 的 核心 
部 分 集中 到 服务 器 上 ,简化 了 系统 的 开发 .维护 和 使 用 。 客 户 机 上 只 要 安装 一 个 浏览 器 
(Browser), 如 Netscape Navigator 或 Internet Explorer. 服务 器 安装 Oracle, Sybase, 
Informix 或 SQL Server 等 数据 库 。 浏 览 器 通过 Web Server 同 数据 库 进行 数据 交互 。 

B/S 最 大 的 优点 就 是 可 以 在 任何 地 方 进行 操作 而 不 用 安装 任何 专门 的 软件 ,只 要 有 一 
台 能 上 网 的 电脑 就 能 使 用 ,客户 端 零 维护 ,系统 的 扩展 非常 容易 。B/S 结构 的 使 用 越 来 越 
多 ,特别 是 由 需求 推动 了 AJAX 技术 的 发 展 , 它 的 程序 也 能 在 客户 端 电 脑 上 进行 部 分 处 理 ， 
从 而 大 大 地 减轻 了 服务 器 的 负担 ; 并 增加 了 交互 性 ,能 进行 局 部 实时 刷新 。 

B/S 架构 软件 的 优势 是 维护 和 升级 方式 简单 ,成 本 降低 ,选择 更 多 。 劣 势 是 应 用 服务 器 
运行 数据 负荷 较 重 。 由 于 B/S 架构 管理 软件 只 安装 在 服务 器 端 (Server) 上 ,网 络 管理 人 员 
只 需要 管理 服务 器 就 行 了 ,用 户 界面 主要 事务 逻辑 在 服务 器 (Server) 端 完全 通过 WWW 浏 
览 器 实现 , 极 少 部 分 事务 逻辑 在 前 端 (Browser) 实 现 , 所 有 的 客户 端 只 有 浏览 器 ,网 络 管理 
人 员 只 需要 做 硬件 维护 。 但 是 ,应 用 服务 器 运行 数据 负荷 较 重 , 一 旦 发 生 服务 器 “崩溃 ”等 问 
题 ,后 果 不 堪 设想 。 因 此 ,许多 单位 都 备 有 数据 库存 储 服务 器 ,以 防 万 一 。 

C/S 结构 与 B/S 的 区 别 总 结 起 来 有 以 下 几 点 。 

(1) 硬件 环境 不 同 : C/S 一 般 建立 在 专用 的 网 络 上 .小 范围 里 的 网 络 环境 ,局 域 网 之 间 
再 通过 专门 服务 器 提供 连接 和 数据 交换 服务 。B/S 建立 在 广域网 之 上 , 比 C/S 适 应 环境 的 
能 力 更 强 ,一 般 只 需要 有 操作 系统 和 浏览 器 。 

(2) 安全 要 求 不 同 : C/S 一 般 面 向 相对 固定 的 用 户 群 , 对 信息 安全 的 控制 能 力 很 强 . 一 
般 高 度 机 密 的 信息 系统 采用 C/S 结构 适宜 。B/S 建立 在 广域网 之 上 ,对 安全 的 控制 能 力 相 
对 弱 , 面 向 不 可 知 的 用 户 群 。 

(3) 程序 架构 不 同 : C/S 程序 可 以 更 加 注重 流程 ,对 权限 多 层次 校 验 ,对 系统 运行 速度 
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考虑 较 少 。B/S 对 安全 以 及 访问 速度 要 有 多 重 考虑 。 

(4) 软件 重用 不 同 : C/S 程序 出 于 整体 性 考虑 ,构件 的 重用 性 不 如 在 B/S 环境 下 的 构 
件 的 重用 性 好 。B/S 要 求 构件 功能 相对 独立 性 强 ,能 够 相对 较 好 的 重用 。 

(5) 系统 维护 不 同 : C/S 程序 由 于 整体 性 要 求 ,处 理 出 现 的 问题 以 及 系统 升级 都 比较 
困难 。B/S 由 构件 组 成 ,个 别 构 件 的 更 换 就 可 以 实现 系统 的 无 缝 升级 ,系统 维护 开销 小 ,而 
且 用 户 从 网 上 自己 下 载 安 装 就 可 以 实现 升级 。 

(6) 用 户 接口 不 同 : C/S 多 建立 在 Windows 平台 上 ,表现 方法 有 限 ,对 程序 员 普 遍 要 求 
较 高 。B/S 建立 在 浏览 器 上 ,有 更 加 丰富 和 生动 的 表现 方式 与 用 户 交 流 ,并 且 使 用 难度 减 
低 ,开发 成 本 减少 。 

(7) 信息 流 不 同 : C/S 程序 一 般 是 典型 的 中 央 集 权 的 机 械 式 处 理 , 交 互 性 相对 较 低 。 
B/S 信息 流向 可 变化 ,更 像 交 易 中 心 。 


(.4 互联 网 新 技术 及 应 用 


1.4.1 IPv6 


IPv6(Internet Protocol Version 6) 是 下 一 代 互 联网 协议 ,是 用 来 替代 现行 的 IP(IPv4) 
协议 的 一 种 新 的 IP 协议 。 

今天 的 互联 网 大 多 数 应 用 的 是 IPv4 协议 ,IPv4 协议 已 经 使 用 了 20 多 年 ,在 这 20 多 年 
的 应 用 中 ,IPv4 获得 了 巨大 的 成 功 ,同时 随 着 应 用 范围 的 扩大 , 它 也 面临 着 越 来 越 不 容 忽 视 
的 危机 (例如 地 址 匮乏 ) 。IPv6 是 为 了 解决 IPv4 所 存在 的 一 些 问题 和 不 足 而 提出 的 ,同时 
它 还 在 许多 方面 提出 了 改进 。 

经 过 一 个 较 长 的 IPv4 和 1IPv6 共存 的 时 期 ,IPv6 最 终 会 完全 取代 IPv4 在 互联 网 上 占据 
统治 地 位 。IPv6 所 引进 的 主要 变化 如 下 : 

(1) 更 大 的 地 址 空间 。IPv6 将 地 址 从 IPv4 的 32b 增 大 到 了 128b, 使 地 址 空间 增 大 了 
296 倍 。 这 样 大 的 地 址 空间 在 可 预见 的 将 来 是 不 会 用 完 的 。 

(2) 扩展 的 地 址 层次 结构 。IPv6 由 于 地 址 空间 很 大 ,因此 可 以 划分 为 更 多 的 层次 。 

G) 灵活 的 首部 格式 。IPv6 数据 报 的 首部 和 IPv4 的 并 不 兼容 。IPv6 定义 了 许多 可 选 
的 扩展 首部 ,不仅 可 提供 比 IPv4 更 多 的 功能 ,而 且 还 可 提高 路 由 器 的 处 理 速率 ,这 是 因为 路 
由 器 对 扩展 首部 不 进行 处 理 ( 除 逐 跳 扩展 首部 外 ) 。 

(4) 改进 的 选项 。IPv6 允许 数据 报 包 含有 选项 的 控制 信息 ,因而 可 以 包含 一 些 新 的 选 
项 (IPv4 所 规定 的 选项 是 固定 不 变 的 ) 。 

(5) 允许 协议 继续 扩充 。 这 一 点 很 重要 ,因为 技术 总 是 在 不 断 地 发 展 ( 如 网 络 硬件 的 更 
新 ) ,而 新 的 应 用 也 还 会 出 现 (IPv4 的 功能 是 固定 不 变 的 ) 。 

(6) 支持 即 插 即 用 ( 即 自动 配置 ) 。 

(7) 支持 资源 的 预 分 配 。IPv6 支持 实时 视 像 等 要 求 保证 一 定 的 带宽 和 时 延 的 应 用 。 

在 IPv6 中 ,每 个 地 址 占 128b, 地 址 空间 大 于 3.4X1038。 如 果 整 个 地 球 表面 (包括 陆地 
和 水 面 ) 都 覆盖 着 计算 机 :那么 IPv6 允许 每 平方 米 拥有 7X1023 个 IP 地 址 。 如 果 地 址 分 配 
速率 是 每 微 秒 分 配 100 万 个 地 址 , 则 需要 1019 年 的 时 间 才 能 将 所 有 可 能 的 地 址 分 配 完毕 。 
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可 见 在 想象 得 到 的 将 来 ,IPv6 的 地 址 空间 是 不 可 能 用 完 的 。 

巨大 的 地 址 范围 还 必须 使 维护 互联 网 的 人 易于 阅读 和 操纵 这 些 地 址 。IPv4 所 用 的 点 
分 十 进 制 记 法 现在 也 不 够 方便 了 。 例 如 ,一 个 用 点 分 十 进 制 记 法 的 128b 的 地 址 : 

104. 230. 140. 100. 255. 255. 255. 255. 0. 0. 17. 128. 150. 10. 255. 255 

为 了 使 地 址 再 稍 简洁 些 ,IPv6 使 用 冒号 十 六 进 制 记 法 (colon hexadecimal notation, 简 
写 为 colon hex) , 它 把 每 个 16b 的 值 用 十 六 进 制 值 表示 ,每 个 值 之 间 用 冒号 分 隔 。 例 如 ,如 
果 前 面 所 给 的 点 分 十 进 制 数 记 法 的 值 改 为 冒号 十 六 进 制 记 法 ,就 变 成 了 : 

68E6:8C64:FFFF:FFFF:0:1180:960A:FFFF 

这 里 将 0000 中 的 前 三 个 0 省略 了 。 例 如 ,三 个 0 后 面 一 个 F(000F) 可 写 为 F。 冒 号 十 
六 进 制 记 法 还 包含 两 个 技术 使 它 尤 其 有 用 。 首 先 ,冒号 十 六 进 制 记 法 可 以 允许 零 压缩 (Zero 
Compression) , 即 一 连 串 连续 的 零 可 以 为 一 对 冒号 所 取代 ,例如 : 

FF05:0:0:0:0:0:0:B3 可 以 写成 FF05::B3 

为 了 保证 零 压缩 有 一 个 不 含混 的 解释 ,规定 在 任 一 地 址 中 只 能 使 用 一 次 零 压 缩 。 该 技 
术 对 已 建议 的 分 配 策略 特别 有 用 ,因为 会 有 许多 地 址 包含 连续 的 零 串 。 

其 次 ,冒号 十 六 进 制 记 法 可 结合 点 分 十 进 制 记 法 的 后 级 。 下 面 会 看 到 这 种 结合 在 IPv4 
向 IPv6 的 转换 阶段 特别 有 用 。 例 如 ,0:0:0:0:0:0:128. 10. 2. 1 是 一 个 合法 的 冒号 十 六 进 
制 记 法 。 

请 注意 ,在 这 种 记 法 中 ,虽然 为 冒号 所 分 隔 的 每 个 值 是 一 个 16b 的 量 , 但 每 个 点 分 十 进 
制 部 分 的 值 则 指明 一 个 字 节 (8b) 的 值 。 再 使 用 零 压 缩 即 可 得 : : :128. 10. 2. 1。 

CIDR 的 斜 线 表 示 法 仍然 可 用 。 例 如 ,60b AY ATE 12AB00000000CD3( 十 六 进 制 表示 的 
15 个 字符 ,每 个 字符 代表 4b) 可 记 为 : 

12AB:0000:0000:CD30:0000:0000:0000:0000/60 

12AB::CD30:0:0:0:0/60 

12AB:0:0:CD30::/60 

IPv6 不 可 能 立刻 替代 IPv4, 因 此 在 相当 一 段 时 间 内 IPv4 和 IPv6 会 共存 在 一 个 环境 
中 。 要 提供 平稳 的 转换 过 程 ,使 得 对 现 有 的 使 用 者 影响 最 小 ,就 需要 有 良好 的 转换 机 制 。 目 
前 , IETF 推荐 了 双 协 议 栈 、 隧 道 技术 以 及 NAT 等 转换 机 制 。 


1.4.2 MRM 


物 联 网 (the Internet of Things) 是 新 一 代 信 息 技术 的 重要 组 成 部 分 。 国 际 电信 联盟 
(ITU) 对 物 联网 定义 为 :“ 通 过 二 维 码 识 读 设 备 . 射 频 识 别 (RFID) 装 置 .红外 感应 器 、 全 球 
定位 系统 和 激光 扫描 器 等 信息 传 感 设 备 , 按 约 定 的 协议 ,把 任何 物品 与 互联 网 相连 接 ,进行 
信息 交换 和 通信 ,以 实现 智能 化 识别 .定位 .跟踪 ,监控 和 管理 的 一 种 网 络 .” 中 国 物 联网 校 企 
联盟 将 物 联网 的 定义 为 当下 几乎 所 有 技术 与 计算 机 、 互 联网 技术 的 结合 ,实现 物体 与 物体 之 
间 环 境 以 及 状态 信息 实时 的 共享 以 及 智能 化 的 收集 传递. 处理 执行。 广义 上 说 ,涉及 信息 
技术 的 应 用 ,都 可 以 纳入 物 联 网 的 范畴 。 物 联网 简单 理解 就 是 “ 物 物 相连 的 互联 网 ”, 通 过 智 
能 感知 .识别 技术 与 普 适 计算 ,广泛 应 用 于 网 络 的 融合 中 ,是 互联 网 的 应 用 拓展 。 与 其 说 物 
联网 是 网 络 ,不 如 说 物 联 网 是 业务 和 应 用 。 

物 联网 被 称 为 继 计算 机 、 互 联网 之 后 世界 信息 产业 发 展 的 第 三 次 浪潮 。2009 年 1 月 28 


17 


Ww 


18 


VY 


Web 前 端 设计 一 一 HTML+CSS+jQuery 技 术 教 程 


日 ,奥巴马 就 任 美国 总 统 后 ,在 一 次 “圆桌 会 议 "* 上 ,IBM 首席 执行 官 彭 明 盛 首 次 提出 “智慧 
地 球 ” 这 一 概念 。 当 年 ,美国 将 新 能 源 和 物 联网 列 为 振兴 经 济 的 两 大 重点 。2009 年 8 月 , 温 
家 宝 “ 感 知 中 国 ” 的 讲话 把 我 国 物 联网 领域 的 研究 和 应 用 开发 推 向 了 高 潮 , 无 锡 市 率先 建立 
了 “感知 中 国 ”研究 中 心 ,中 国 科学 院 、 运 营 商 ,多 所 大 学 建立 了 物 联网 研究 院 , 物 联网 被 列 为 
国家 五 大 新 兴 战 略 性 产业 之 一 。 

应 用 创新 是 物 联网 发 展 的 核心 ,以 用 户 体验 为 核心 的 创新 2. 0 是 物 联 网 发 展 的 灵魂 。 
创新 2.0 即 面向 知识 社会 的 下 一 代 创 新 ,与 创新 1.0 相 比 较 主要 变化 体现 在 科技 创新 模式 
的 改变 , 即 从 专业 科技 人 员 实 验 室 研发 出 科技 创新 成 果 后 用 户 被 动 使 用 到 技术 创新 成 果 的 
最 终 用 户 直 接 或 通过 共同 创新 平台 参与 技术 创新 成 果 的 研发 和 推广 应 用 全 过 程 。 物 联网 及 
移动 泛 在 技术 的 发 展 ,使 得 技术 创新 形态 发 生 转变 ,以 用 户 为 中 心 .以 社会 实践 为 舞台 、 以 人 
为 本 的 创新 2.0 形态 正在 显现 ,例如 Web 2.0、 开 放 源 代码 、 自 由 软件 以 及 麻 省 理工 学 院 提 
出 的 微观 装配 实验 室 等 。 实 际 生活 场景 下 的 用 户 体验 是 创新 2. 0 BES A 


1.4.3 移动 互联 


移动 互联 网 简单 理解 就 是 将 移动 通信 和 互联 网 二 者 结合 起 来 ,成 为 一 体 。 广 义 的 移动 
互联 网 定义 是 指 用 户 可 以 使 用 手机 、 笔 记 本 等 移动 终端 通过 协议 接 入 互联 网 ; 狭义 的 移动 
互联 网 定义 则 是 指 用 户 使 用 手机 终端 通过 无 线 通信 的 方式 访问 采用 WAP 的 网 站 。 

移动 互联 网 支持 多 种 无 线 接 人 方式 ,根据 覆盖 范围 的 不 同 ,可 分 为 无 线 个 人 局 域 网 通信 
技术 (Wireless Personal Area Network Communication Technologies, WPAN) 4A 无线 局 
域 网 (Wireless Local Area Networks. WLAN) 4% A, J 28 Jak H KY (Wireless Metropolitan 
Area Network, WMAN) 接 入 ,无线 广域网 (Wireless Wide Area Network, WWAN ) 接 人 等 。 

WPAN 主要 用 于 个 人 区 域 网 场合 (如 家 庭 网 络 ) ,被 称 为 接 和 人 网 的 “附加 一 公里 ”, 蓝 牙 
(Bluetooth) 是 目前 最 流行 的 WPAN 技术 。WLAN 主要 用 于 商务 休闲 和 企业 校园 等 网 络 
环境 ,被 广泛 称 为 Wi-Fi( 无 线 相 容 性 认证 ) 网 络 ,覆盖 范围 约 100m, 目 前 处 于 快速 发 展 阶 
段 ,已 在 机 场 、 酒 店 和 校园 等 场合 得 到 广泛 应 用 。WMAN 是 一 种 新 兴 的 适合 于 城 域 接 入 的 
技术 ,支持 中 速 移 动 , 视 距 传输 可 达 50km。WWAN 是 指 利用 现 有 移动 通信 和 网络 (如 3G、 
4G) 实 现 互联 网 接 人 ,具有 网 络 履 盖 范围 广 、 支 持 高 速 移动 性 .用户 接 和 人 方便 等 优点 。 

3G 是 指 将 无 线 通信 与 国际 互联 网 等 多 媒体 通信 结合 的 第 三 代 移 动 通信 系统 ,支持 高 速 
数据 传输 。3G 主要 特征 是 可 提供 移动 宽带 多 媒体 业务 ,能 够 同时 传送 声音 及 数据 信息 ,下 
行 速度 峰值 理论 可 达 3. 6Mb/s( 一 说 2. 8Mb/s) ,上行 速 度 峰值 可 达 384Kb/s。 目 前 3G fF 
在 3 种 标准 : CDMA2000( 中 国电 信 )、WCDMA( 中 国联 通 )、TD-SCDMA (中国 移动 )。 业 
界 将 CDMA 技术 作为 3G 的 主流 技术 。4G 描述 的 是 相对 于 3G 的 下 一 代 通 信 网 络 ,支持 
100Mb/s~150Mb/s 的 下 行 网 络 带 宽 , 具 有 通信 速度 快 .网 络 频 谱 宽 ,通信 灵活 、 智 能 性 能 
高 .兼容 性 好 ,高 质量 通信 等 特点 。 


1.4.4 云 计算 与 大 数据 


简单 地 理解 , 云 就 是 计算 机 网 络 以 及 互联 网 的 一 种 比喻 。 在 有 关 计 算 机 网 络 的 图 中 经 
常 把 电信 和 网、 互联 网 和 底层 基础 设施 等 抽象 成 云 。 云 计算 (Cloud Computing) 是 基于 互联 网 
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的 相关 服务 的 增加 、 使 用 和 交付 模式 ,通常 涉及 通过 互联 网 来 提供 动态 易 扩展 且 经 常 是 虚拟 
化 的 资源 。 云 计算 可 以 让 用 户 通 过 电脑 ,笔记 本 、 手 机 、 上 网 本 等 方式 接 入 数据 中 心 , 按 需 求 
进行 运算 。 

有 关 云 计算 的 概念 有 多 种 说 法 ,美国 国家 标准 与 技术 研究 院 (NIST) 把 云 计算 定义 为 一 
种 按 使 用 量 付费 的 模式 ,这 种 模式 提供 可 用 的 、 便 捷 的 、 按 需 的 网 络 访问 ,进入 可 配置 的 计算 
资源 共享 池 ( 资 源 包 括 网 络 、 服 务 器 存储、 应 用 软件 .服务 ) ,这 些 资 源 能 够 被 快速 提供 ,只 需 
投入 很 少 的 管理 工作 ,或 与 服务 供应 商 进行 很 少 的 交互 。 

对 于 “大 数据 ?(Big Data) 研 究 机 构 Gartner 给 出 的 定义 是 :“ 大 数据 ?是 需要 新 处 理 模 
式 才能 具有 更 强 的 决策 力 ,洞察 发 现 力 和 流程 优化 能 力 的 海量 、 高 增长 率 和 和 多样 化 的 信息 资 
产 。 也 可 以 理解 为 “无 法 在 一 定时 间 内 用 常规 软件 工具 对 其 内 容 进行 抓 取 、 管 理 和 处 理 的 数 
HRA”. 

大 数据 具有 四 个 显著 的 特点 : 

O 数据 体 量 巨大 ,达到 PB 级 别 。 

@ 数据 类 型 繁多 ,包含 日 志 、 视 频 、 图 片 . 地 理 位 置 等 信息 。 

© 处 理 速度 快 ,快速 高 效 地 从 各 种 类 型 的 巨 量 数据 中 找到 高 价值 的 信息 。 

@ 高 的 价值 回报 ,可 以 合理 利用 数据 并 对 其 进行 分 析 , 可 以 得 到 意 想不到 的 回报 。 

大 数据 可 分 成 大 数据 技术 ,大 数据 工程 ,大 数据 科学 和 大 数据 应 用 等 领域 。 其 中 ,大 数 
据 技术 和 大 数据 应 用 是 目前 研究 的 热点 。 所 谓 大 数据 技术 就 是 指 实现 从 各 种 各 样 类 型 的 数 
据 中 快速 获得 有 价值 信息 的 技术 。 大 数据 应 用 对 各 行业 都 具有 极 大 的 吸引 力 , 也 是 发 展 趋 
势 , 但 如 何 应 用 也 是 现 阶段 对 各 行业 的 极 大 挑战 。 


小 结 


本 章 主 要 讲述 了 Web 的 基础 知识 ,包括 Internet 的 发 展 与 应 用 .计算 机 网 络 的 定义 及 
其 功能 ,分 组 交换 思想 .TCP/IP 的 层次 结构 等 。 重 点 讲述 了 IP 地 址 的 作用 、 构 成 和 应 用 。 
最 后 介绍 了 万 维 网 与 浏览 器 ,以 及 C/S、B/S 结构 。 简 单 介绍 了 当今 互联 网 出 现 的 一 些 新 技 
术 及 其 应 用 ,包括 物 联网 、 云 计算 和 大 数据 等 。 为 学 习 后 续 的 Web 知识 ,以 及 进行 Web it 
计 、 开 发 与 应 用 提供 了 基础 的 概念 和 思路 。 


习题 


1. 简 述 Internet 的 起 源 与 发 展 。 

2. 简 述 计算 机 网 络 的 含义 ,举例 说 明 计 算 机 网 络 的 主要 功能 。 

3. fa TCP/IP 的 层次 结构 ,说明 IP 地 址 的 分 类 ,并 举例 说 明 IP 地 址 的 应 用 。 
4. 简 述 C/S 结构 与 B/S 的 区 别 。 

5. 简 述 互联 网 在 你 自身 学 习 、 生 活 的 中 的 应 用 。 
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@.1 认识 HTML 


2.1.1 创建 第 一 个 HTML 网 页 


使 用 Windows 操作 系统 下 附带 的 记事 本 来 创建 第 一 个 HTML 文件 ,详细 步骤 如 下 

(1) 打开 开始 菜单 找到 记事 本 : 选择 “开始 ”所 有 程序 ”一 附件 ”记事 本 ”。 

(2) 记事 本 打开 ,此 时 可 以 输入 HTML 代码 。 

(3) 显示 已 知 文件 类 型 的 扩展 名 : Windows 7 的 资源 管理 器 默认 会 隐藏 已 知 文件 类 型 
的 扩展 名 。 例 如 ,文件 名 为 hello. html 的 文件 在 资源 管理 器 中 显示 为 hello, 隐 藏 了 它 的 
. html 扩展 名 。 

让 Windows 7 显示 这 些 扩展 名 会 减少 很 多 困惑 ,所 以 要 更 改 文 件 夹 选项 以 便 可 以 看 到 
文件 扩展 名 。 

首先 ,在 任意 一 个 资源 管理 器 窗口 中 ,选中 “工具 ”菜单 中 的 “文件 夹 选 项 ”。 

下 一 步 , 在 “查看 ”选项 卡 中 ,“ 高 级 设置 "之 下 , 拖 动 滚动 条 直到 看 见 “ 隐 藏 已 知 文件 类 型 
的 扩展 名 ”, 取 消 对 这 个 选项 的 选中 。 

单 击 "确定 ”按钮 保存 这 个 设置 ,今后 就 可 以 在 资源 管理 器 中 看 见 文件 的 扩展 名 。 

(4) 把 下 面 的 代码 输入 到 记事 本 的 空白 窗口 中 。 

例 2.1 第 一 个 HTML 网 页 。 


<html> 
< body> 


<hl >Hello, World</h1 > 


</body> 

</html> 

(5) 选择 “文件 ”>“ 保 存 ” 菜 单项 来 保存 所 做 的 工作 , 单 击 “ 保 存 ” 按 钮 后 会 看 到 一 个 “ 另 
存 为 ”对话 框 。 首 先 , 单 击 对 话 框 左 栏 的 “桌面 "图 标 ,然后 在 “保存 类 型 "下 拉 框 中 选择 “所 有 
文件 ”和 否则 记事 本 会 在 文件 名 后 面 添加 默认 的 . txt 扩展 名 )。 输 入 index. html 作为 文件 名 
并 单 击 “保存 ?按钮 。 
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(6) 在 浏览 器 中 打开 这 个 网 页 文件 : 双击 刚才 创建 的 index. html 文件 (位 于 桌面 ), 成 
功 ! 浏览 器 显示 如 图 2. 1 所 示 的 网 页 。 


r > 
@ CAUsers\Administrator\Desktop\index.html - Windo... [> (6 |2 
GO- [el cavsersvadminist ~[4][x|[P Beez P~ 


cle WE |Æ CAUsers\Administrator\Desktop\index him! 


Hello, World 


图 2.1 第 一 个 HTML 网 页 


至 此 ,第 一 个 HTML 文件 被 创建 ! 

ER: 这 是 一 个 最 简单 的 网 页 文件 。 它 不 是 很 完整 , 却 最 容易 理解 与 入 手 。 注 意 掌握 
建立 网 页 文件 与 浏览 网 页 文件 的 方法 与 步骤 。 网 页 文件 的 扩展 名 可 以 是 html 或 者 htm, 本 
教材 一 律 使 用 . html 扩展 名 。 


2.1.2 HTML 术语 


上 小 节 中 所 创建 的 HTML XIF, <html>, </html> ,<h1 >, <body> 4 4 HK 
标记 HTML 中 的 文本 的 。 现 在 ,仔细 看 一 看 HTML 标签 在 例 2. 2 中 是 怎样 工作 的 。 
例 2.2 HTML 中 的 标签 。 


<hl > Hello, World </hl > 


在 例 2. 2 中 ,二 hl 之 和 过/hl 二 被 叫做 标签 一 一 二 hl 之 是 起 始 标签 ,二 /hl 之 是 终止 标 
签 。 通 常 在 起 始 标签 和 终止 标签 中 间 放 和 一些 内 容 。 本 例 中 ,内 容 是 “Hello, World”. #R 
签 用 来 告诉 浏览 器 , 它 的 内 容 “Hello, World” 是 一 个 顶级 标题 (也 就 是 一 级 标题 )。 例 2. 2 
的 全 部 内 容 叫 做 一 个 元 素 。 在 这 里 被 称 为 王 hl 二 元 素 。 一 个 元 素 由 闭合 的 标签 和 标签 之 
间 的 内 容 组 成 。 

用 成 对 的 标签 包围 内 容 来 告诉 浏览 器 网 页 的 结构 。 标 签 的 构成 公式 为 : 

元 素 王 起 始 标签 十 内 容 十 终止 标签 

标签 由 标签 名 和 包 庄 它 的 尖 括号 组 成 ,也 就 是 是 二 和 二 符号 。 起 始 标签 二 hl 之 开 始 一 
个 元 素 ,而 终止 标签 二 /hl 二 结束 一 个 元 素 。 根 据 二 /hl 二 跟 在 内 容 后 面 并 且 它 在 hl 之 前 
有 一 个 /判断 它 是 一 个 终止 标签 。 所 有 的 终止 标签 内 部 都 有 一 个 /符号 。 

提示 : 本 单元 是 第 一 次 介绍 有 关 HTML 的 专业 术语 ,为 方便 学 习 与 消化 ,本 教程 把 专 
业 术 语 按 需要 循序 渐进 地 通过 举例 介绍 给 读者 ,后 边 讲 到 的 专业 术语 也 顺便 复习 了 前 边 所 
讲 的 内 容 ,加深 印 象 与 理解 。 当 然 , 最 重要 的 是 掌握 理解 代码 与 编辑 代码 的 能 力 。 


2.1.3 HTML4 和 HTML5 


HTML(HyperText Markup Language, 超 文本 标记 语言 ) 是 万 维 网 的 原始 语言 ,现在 提 
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到 它 通常 是 指 它 的 现行 版 本 HTML4. 01 或 者 简称 HTML4。HTML 最 初 是 SGML 
(Standard Generalized Markup Language, 标 准 通用 标记 语言 ) 的 一 种 应 用 ,是 一 系列 用 作 
标记 语言 的 元 语言 。SGML 相当 复杂 ,实际 上 大 多 数 浏 览 器 都 不 完全 遵循 它 所 有 的 奇怪 特 
性 。 在 网 络 的 实际 应 用 中 ,HTML 是 一 个 受 SGML 影响 的 语言 。 

关于 HTML 需要 注意 的 另 一 点 是 所 有 的 HTML 用 户 代理 程序 (这 是 用 来 称呼 那些 阅 
读 HTML 的 程序 的 术语 ,包括 网 络 浏览 器 .搜索 引擎 .网络 疏 虫 等 ) 都 有 相当 宽松 的 错误 处 
理 机 制 。 许 多 技术 上 不 合法 的 结构 , 像 错 误 的 嵌 套 标签 或 者 不 好 的 属性 名 ,都 是 被 允许 的 。 
这 种 错误 处 理 在 不 同 浏览 器 间 是 相对 一 致 的 。 但 是 在 一 些 边缘 情况 下 仍然 有 许多 不 同 , 因 
为 这 种 错误 处 理 行为 不 是 书面 化 的 ,也 不 是 任何 标准 的 一 部 分 。 所 以 ,把 编写 好 的 HTML 
文档 在 不 同 的 浏览 器 中 验证 并 通过 ,是 一 个 良好 的 做 法 。 

HTML5 是 HTML 的 最 新 标准 。 

HTML5 的 提出 是 用 来 代替 原来 的 HTML4(XHTML) 版 本 。 

HTML5 的 设计 是 为 了 使 该 语言 支持 更 多 的 多 媒体 格式 ,可 读 性 更 强 , 支 持 更 多 的 计算 
机 和 其 他 智能 设备 ,比如 ,HTML5 目前 支持 PC ,平板 电脑 .智能 手机 、 智 能 电视 等 。 

提示 : HTMLS 与 HTMLA 并 无 原则 上 的 区 别 ,HTML5 是 HTML4 的 进化 与 强化 版 
本 ,更 好 地 支持 多 媒体 功能 、 支 持 PC 以 外 更 多 的 设备 。 


2.1.4 为 HTML 做 好 准备 


因特网 上 的 许多 页 面 充 斥 着 “不 规范 的 "HTML。 

如 果 只 是 在 浏览 器 中 查看 ,那么 下 列 HTML 代码 看 起 来 会 运行 得 很 好 (虽然 它 没有 遵 
循 HTML 规则 )。 

例 2.3 一 个 “不 规范 的 "HTML 代码 文件 。 


<html> 
< head > 
<title> This is bad HTML </title> 
< body > 
< h1 > Bad HTML 
</body> 


为 了 标准 化 HTML 代码 ,必须 遵循 下 列 4 条 主要 的 规则 。 
1. HTML CAPA EBRE 


在 HTML HP ,— te 50 Z lal FY WAS IE HERS A: 
例 2.4 KEMBRE. 


<b><i>This text is bold and italic </b></i> 


在 HTML 中 ,所 有 元 素 之 间 必 须 正 确 地 说 套 ,如 : 
例 2.5 iE MRE. 


<b><i>This text is bold and Italic</i></b> 


注意 : ATRAIR +E LAR A DT ABANALREOR<K/li> mea 
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之 间 。 


例 2.6 “不 规范 的 ?代码 : 嵌 套 中 忘记 了 一 个 <</li>。 


<ul> 
<1i> Coffee </li> 
<li>Tea 
<ul> 
<1i> Black tea</li> 
<1i> Green tea</li> 
</ul> 
<1i>Milk</li> 
</ul> 


例 2.7 规范 代码 : MME </li> sé MIE HIKE. 


<ul> 
< 1i> Coffee </li> 
<li> Tea 
<ul> 
<1i> Black tea</li> 
< 1i> Green tea</li> 
</ul> 
</li> 
<1i>Milk</li> 
</ul> 


注意 ; AEMARGAT P< RERA -—4</li> mee, 
2. HTML 元 素 必须 是 闭合 的 


非 空 元 素 必须 有 一 个 终止 标签 。 
例 2.8 “不 规范 的 "代码: 无 终止 标签 导致 不 闭合 。 


<p> This is a paragraph 
<p> This is another paragraph 


例 2.9 规范 代码 : 加 入 终止 标签 。 


<p>This is a paragraph</p> 

<p>This is another paragraph</p> 

空 元 素 也 必须 闭合 。 

例 2. 10 “不 规范 的 ?代码 : 空 元 素 没 有 闭合 。 
A break: <br> 


A horizontal rule: <hr> 
An image: < img src = "happy. gif" alt = "Happy face"> 


Gl 2.11 规范 代码 : 空 元 素 闭合 。 


An break: < br /> 
A horizontal rule: <hr /> 
An image: < img src = "happy. gif" alt = "Happy face" /> 
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3. HTML 元 素 必须 小 写 


标签 名 和 属性 必须 小 写 。 
例 2. 12 “不 规范 的 ”代码 : 出 现 了 大 写 的 标签 名 。 


<BODY> 
<P>This is a paragraph</P> 
</BODY > 


例 2.13 规范 代码 : HTML 格式 应 该 是 标签 名 小 写 。 


<body> 
<p>This is a paragraph</p> 
</body > 


4. HTML 文档 必须 有 一 个 根 元 素 


所 有 HTML 元 素 必 须 嵌 套 在 二 html 之 这 个 根 元 素 内 。 子 元 素 必 须 成 对 并 且 正 确 舱 套 
在 它们 的 父 元 素 中 。 

基本 文档 结构 如 下 : 

例 2.14 HTML 基本 文档 结构 。 


<html> 
<head> «</head> 


<body> … </body> 
</html> 


html 元 素 是 HTML 和 HTML 文档 中 的 最 外 层 元 素 。html 元 素 也 被 叫做 根 元 素 。 

二 html 二 标签 告诉 浏览 絮 这 是 一 个 HTML 文档 。 

head 元 素 是 一 个 容器 ,head 内 部 所 有 的 元 素 都 被 包含 在 这 个 容器 内 。 二 head 二 中 的 元 
素 可 以 包括 脚本 ,指引 浏览 器 到 指定 位 置 寻找 样式 表 以 及 提供 元 信息 等 。 下 列 标签 可 以 被 
加 入 头 部 : <base>,.<link>,<meta>,.<script>,<style>Ml<title>. <title> ir 
定义 了 文档 的 标题 , 它 也 是 头 部 内 唯一 一 个 必须 的 元 素 。 

body 元 素 包含 在 网 络 浏览 器 中 显示 的 所 有 内 容 ,如 文本 、 超 级 链接 、 图 像 、 表 格 、 列 

一 个 仅 包含 最 少 的 必须 标签 的 简单 HTML 文档 如 下 : 

例 2.15 HTML 必须 包含 如 下 标签 。 


<html> 
<head> 
<title> Title of the document </title> 

</head> 

< body> 

The content of the document … … 

</body> 

</html> 
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例 2.15 的 网 页 显示 如 图 2. 2 所 示 。 


@ Title of the document - Windows Internet E.. [o || & || $3 | 
GO > [E] dacxample\examy -| [x |[P Saez 


文件 (F) RE) SEV) ”收藏 夫 (A) IAT) SH 


Ve B= Æ Title of the document 


The content of the document...... 


图 2.2 包含 最 少 的 必须 标签 的 网 页 


更 多 的 一 些 HTML 语法 规则 会 在 相关 章节 介绍 。 

ER: 有 关 HTML 的 规范 要 求 还 有 其 他 内 容 ,在 今后 的 讲解 中 逐步 提 到 。 

注意 即使 是 所 谓 规范 的 HTML 编码 ,文档 中 的 最 外 层 标 签 仍然 是 二 html 记 标签 ,而 不 
是 二 HTML>, 文 件 扩展 名 也 仍然 是 html( 或 htm). 


2.2 文本 元 素 


从 本 章 开 始 学 习 基 本 的 HTML 标签 和 属性 。 


2.2.1 标题 


例 2. 16 演示 标题 标签 是 如 何 工 作 的 。 
例 2.16 标题 标签 。 


<html> 

<head> 
<title> Title of the document </title> 

</head> 

<body> 
<hl>This is heading 1 </hl > 
<h2>This is heading 2</h2> 
<h3>This is heading 3</h3> 
<h4> This is heading 4</h4> 
<h5>This is heading 5 </h5 > 
< h6 >This is heading 6 </h6 > 

</body> 

</html> 


图 2. 3 是 例 2. 16 在 浏览 器 中 的 显示 效果 。 
<h1>#<h6> te HK EM HTML 标题 。 
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入 Title of the document - Windows Internet Expl.. [> | & || £3 | 
GOs [E Damplein; »| 4] x |[P SEE 


This is heading 1 


This is heading 2 
This is heading 3 
This is heading 4 


This is heading 5 


This is beading 6 


图 2.3 标题 1 到 标题 6 
标题 (h 元 素 ) 语 法 : 
<h# align = "left|center|right"> 标 题 内 容 </h 并 > 


井 〈 值 从 1 到 6) 是 标题 的 大 小 ,过 hl 之 定义 字号 最 大 的 标题 ,二 h6 之 定义 字号 最 小 的 
标题 。 
align 是 一 个 可 选 属性 , 它 指定 标题 的 对 齐 方式 。 属 性 值 为 left ,center 和 right 其 中 之 
一 ,分 别 设 定 为 左 对 齐 、 居 中 和 右 对 齐 。 
属性 : 标签 还 可 以 添加 属性 ,来 赋予 它 额 外 的 信息 。 属 性 出 现在 起 始 标签 内 部 , 它 的 值 
出 现在 引号 内 并 且 必 须 是 小 写 。 它 们 的 格式 看 起 来 像 二 tag attribute= "value" >content+ 
二 /tag 志 这样。 一 旦 为 标签 加 入 属性 ,标签 将 能 起 更 多 的 作用 。 
例 2.17 加 入 属性 。 
<html> 
<head> 
<title> Title of the document </title> 
</head> 
<body> 
<hl align = "left"> Heading 1 is on the left.</hl > 
<h2 align="center"> Heading 2 is in the middle. </h2 > 
<h3 align="right"> Heading 3 is on the right.</h3> 
</body> 
</html> 
例 2. 17 在 浏览 器 中 显示 效果 如 图 2.4 所 示 。 
与 例 2.2 对 比 ,看 一 看 例 2.18 中 的 元 素 结构 。 
例 2.18 属性 概念 。 


<hl align= "left"> Heading 1 is on the left.</hl > 


<h> ft tr i </h1 > #22 ik fx . Heading 1 is on the left. 是 中 间 的 内 容 。 在 
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Heading 1 is on the left. 


Heading 2 is in the middle. 


Heading 3 is on the right. 


图 2.4 <h> be YR FF HE 


起 始 标签 中 加 入 可 选 属性 来 丰富 元 素 。 

注 1, 一 h# 之 标签 和 < 一 head 过 标签 是 不 一 样 的 。 

注 2; 一 hl 之 到 二 h6 二 元素 的 align 属性 在 HTML 4.01 中 不 推荐 ,而 在 HTML 1.0 的 
Strict DTD 文档 声明 之 下 是 不 被 支持 的 ,可 用 CSS 来 替代 。 

提示 : 通过 标题 文字 标签 又 学 习 到 标签 内 的 attribute( 属 性 ) ,标签 内 的 属性 丰富 了 标 
签 的 应 用 。 要 注意 文中 对 属性 的 语法 要 求 ,而 对 于 使 用 中 文 的 读者 ,还 要 注意 在 编辑 代码 时 
使 用 英文 的 双 引 号 如 : "left" ,而 不 要 使 用 中 文 的 双 引 号 :“left”, 否 则 浏览 器 无 法 识别 。 

还 有 ,align 属性 按 严 格 的 HTML 标准 已 经 不 再 使 用 ,现在 用 的 是 更 规范 的 CSS 办 法 
来 实现 同样 效果 ,第 3 章 将 详细 介绍 CSS。 


2.2.2 文档 标题 


过 title 志 标签 定义 文档 的 标题 , 即 在 标题 栏 内 显示 的 内 容 。 

title 元 素 : 

(1) 定义 浏览 器 标题 栏 中 的 标题 。 

(2) 提供 页 面 在 收藏 夹 中 标题 。 

(3) 在 搜索 引擎 搜索 结果 中 显示 标题 。 

每 个 HTML 文档 在 头 部 必须 有 一 个 title 元 素 。 注 意 过 title 二 元 素 位 于 二 head 放 部 分 ， 
不 是 位 于 二 body 二 中 。 

网 站 设计 者 应 该 用 title 元 素来 给 文档 内 容 定义 一 个 标识 。 由 于 用 户 通 常 脱离 背景 或 
上 下 文 来 查阅 文档 ,所 以 作者 应 该 提供 富有 语 境 背 景 的 标题 。 因 此 ,作者 应 该 提供 一 个 诸如 
Introduction to Nordic Walking(“ 北 欧 健 走 介 绍 ”) 的 标题 ,而 不 是 一 个 仅仅 像 Introduction 
这 样 的 一 个 没有 提供 太 多 语 境 背 景 的 标题 。 

文档 标题 (title 元 素 ) 语 法 : 


<title>title's text </title> 


将 例 2.17 中 到 title 之 元 素 内 容 替 换 为 "align attribute of <h> tag”, 如 例 2.19 所 示 。 
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例 2.19 显示 文档 标题 。 


<html> 

< head > 
<title> align attribute of <h> tag </title> 

</head> 

< body > 
<hl align="left"> Heading 1 is on the left.</hl > 
<h2 align="center"> Heading 2 is in the middle.</h2> 
<h3 align="right"> Heading 3 is on the right.</h3> 

</body> 

</html > 


浏览 器 显示 例 2. 19 的 效果 如 图 2. 5 所 示 。 


@ align attribute of <h> tag - Windows Internet Explorer fo |e ls) 
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Ú b |Æ align attribute of <h> tag 


Heading 1 is on the left. 


Heading 2 is in the middle. 


Heading 3 is on the right. 


图 2.5 每 个 HTML 文档 必须 有 一 个 title 元 素 


ER: 本 章 中 所 讲解 的 标签 绝 大 多 数 是 出 现在 二 body 二 部 分 ,<title 过 标签 是 个 例外 ， 
它 出 现在 二 head 记 部 分 ,这 点 要 注意 。 本 章 只 要 不 特别 指明 ,标签 都 是 在 二 body 记 内 使 用 。 
注意 二 title 记 标签 与 二 h 二 标签 的 不 同 。 


2.2.3 段落 


段落 (Paragraph) 使 用 p 元 素 完 成 。p 元 素 会 在 它 自身 前 后 自动 创建 一 些 空间 。 这 些 
空间 由 浏览 器 自动 应 用 ,也 可 以 在 样式 表 (CSS) 中 指定 。 
段落 (Paragraph 元 素 ) 语 法 : 


<p align ="left|center|right">text </p> 
il 2.20 段落 元 素 应 用 。 


<html> 
<head> 
<title> Show paragraphs </title> 
</head> 
< body> 
<hl >This is heading 1 </hl > 
<p>This is paragraph 1.</p> 


<p>This is paragraph 2.</p> 
<h3>This is heading 3 </h3 > 
</body > 
</html> 
例 2. 20 在 浏览 器 中 显示 效果 如 图 2. 6 所 示 。 
看 不 到 特别 的 地 方 吗 ? 那么 把 图 2. 6 中 浏览 器 窗口 内 的 所 有 内 容 复制 下 来 ,然后 粘贴 
到 记事 本 中 。 
现在 该 知道 将 网 页 的 内 容 拷贝 粘贴 到 记事 本 或 者 Word 程序 中 的 时 候 ,为 什么 在 段落 
之 间 出 现 这 么 多 额外 的 空 行 了 吧 。 
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‘We ME | Show paragraphs 


This is heading 1 
This is paragraph 1. 
This is paragraph 2. 


This is heading 3 


图 2.6 段落 元 素 


段落 的 一 些 其 他 默认 行为 。 
例 2.21 段落 的 默认 行为 。 


<html > 
<head> 
<title> Some other default behaviors of paragraphs </title> 
</head> 
< body> 
<p> 
This paragraph 
contains a lot of lines 
in the source code, 
but the browser 
ignores it. 
</p> 
<p> 
This paragraph 
contains a lot of spaces 
in the source code, 
but the browser 
ignores it. 
</p> 
<p> 
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The number of lines in a paragraph depends on the size of your browser window. If you 
resize the browser window, the number of lines in this paragraph will change. 
</p> 
</body> 
</html> 


例 2. 21 在 浏览 器 中 显示 效果 如 图 2.7 所 示 。 


@ Some other default behaviors of paragraphs - Win.. [ 己 [6 || £3 | 
Go- [E] DAExample\Exam; | 分 | x ||P E22 Pr 


Se WHEE |B Some other default behaviors of paragraphs | | 


This paragraph contains a lot of lines in the 
source code, but the browser ignores it. 


This paragraph contains a lot of spaces in the 
source code, but the browser ignores it. 


The number of lines in a paragraph depends on the 
size of your browser window. If you resize the 
browser window, the number of lines in this 
paragraph will change. 


图 2.7 段落 的 一 些 其 他 默认 行为 
从 现在 开始 ,本 教材 将 带领 读者 一 步 一 步 利 用 已 经 讲授 的 知识 ,为 一 个 健身 俱乐部 一 


Walker Club 一 一 建设 一 个 网 站 。 


项 目 2.1 Walker Club 主页 (index. html 版 本 1)。 


<html> 
<head> 
< title > 沃克 俱乐部 欢迎 您 </title> 


</head> 


<body> 
< hl align= "center"> 咱 们 走 着 瞧 一 一 欢迎 光临 沃克 俱乐部 </hl > 
< h3 > 走路 ,简单 有 效 的 健身 之 道 </h3 > 
<p> 走 路 是 人 类 本 能 的 身体 活动 ,人 类 身体 结构 就 是 为 步行 设计 的 。 问 题 是 , 随 着 汽车 等 代步 工 
具 的 普及 ,人 们 "好 逸 恶 劳 "的 条 件 和 理由 越 来 越 充足 ,以 致 基本 的 走路 功能 都 有 些 退化 了 。 根 据 美国 
疾病 控制 与 预防 中 心 的 研究 ,有 高 达 75% 的 美国 人 每 天 运动 量 不 到 30 分 钟 ,大 部 分 人 几乎 成 天 坐 在 
椅子 上 ,是 不 折 不 扣 的 “沙发 土豆 ”。 反 观 我 们 中 国 的 现实 情形 , 随 着 经 济 的 发 展 ,汽车 的 大 量 使 用 及 
其 他 因素 ,导致 缺乏 锻炼 、 体 形 肥胖 的 人 越 来 越 多 。 
</p> 
<p> 走 路 健身 又 健 脑 。 我国 自古 就 有 “ 走 为 百 练 之 祖 ” 的 健身 经 验 谈 ,其 中 传统 医学 认为 , 双 脚 是 
人 体 的 健康 之 根 。 走 路 刺激 脚底 穴位 ,能 衙 筋 通 络 , 活 血 顺 气 ,强身 健 体 。 同 时 ,现代 运动 医学 研究 也 
证 实 : 走路 时 , 骨 淫 .肌肉 .韧带 、 神 经 末梢 都 要 参加 运动 ,从 而 促进 血液 循环 ,调节 大 脑 皮层 的 活动 功 
能 ,促使 身体 各 种 激素 分 泌 ,使 人 心情 愉悦 。 走 路 防 病 并 延缓 衰老 。 最 新 的 医学 研究 表明 ,一 周 健步 
走 7 小 时 以 上 ,可 以 降低 20% 和 乳腺 癌 、30% 心脏 病 和 50 % 糖尿 病 的 窟 患 率 ,而 中 老年 人 每 天 散步 2.4 
公里 以 上 ,心脏 病 发 作 率 将 降低 50% 。 
</p> 
</body> 
</html> 
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项 目 2.1 在 浏览 器 中 显示 效果 如 图 2. 8 所 示 。 
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欢迎 光临 沃克 健 走 俱乐部 


走路 ， 简 单 有 效 的 健身 之 道 
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图 2.8 为 Walker Club 创建 主页 


提示 : 从 这 里 开始 ,教材 中 出 现 了 一 个 Project( 项 目 ), 这 个 项 目 建立 一 个 虚拟 的 俱乐部 
网 站 。 它 不 同 于 为 讲解 某 一 个 标签 或 属性 而 做 的 例子 , 它 是 对 前 边 所 学 内 容 的 综合 应 用 到 
一 个 网 站 建设 中 , 随 着 学 习 内 容 的 不 断 深入 ,这 个 网 站 项 目 会 不 断 应 用 新 的 学 习 内 容 , 从 而 
使 该 网 站 逐步 变 得 更 加 丰富 充实 。 


2.2.4 换行 


二 br 二 标签 会 插入 一 个 单行 的 换行 。 

二 br 二 元 素 是 一 个 没有 任何 内 容 的 元 素 ,因为 它 仅 仅 意 味 着 一 个 换行 ,没有 别 的 任何 意 
思 。 达 br 二 不 是 唯一 一 个 这 样 的 元 素 ; 还 有 其 他 类 似 的 元 素 ,它们 有 一 个 共同 的 名 字 : 空 元 
Ro E HTML 中 过 br 二 标签 没有 终止 标签 ,但 在 HTML 中 要 求 二 br 二 标签 必须 被 正确 的 
关闭 ,就 像 这 样 : <br />. 

从 p 标签 可 以 看 出 浏览 器 忽略 p 元 素 内 的 回 车 和 空格 键 创建 出 来 的 换行 和 空格 。 二 br 二 
标签 被 用 来 强制 换行 。 

PRAT (br 元素 ) 语 法 : 


Text <br /> 


将 例 2. 22 插入 二 body 二 元 素 中 ,理解 一 下 二 br 二 标签 的 功能 。 
例 2.22 换行 效果 。 


This text is on the first line. 
<br /> 
And this text is on the second line. 


单 就 换行 效果 本 身 来 说 ， 


<p> text </p> 
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等 于 
text<br /><br /> 
例 2.23 换行 与 强制 不 换行 。 


<html> 
<head> 
<title> br & nobr tags</title> 
</head> 
< body> 
This text is on the first line. 
<br /> 
And this text is on the second line. 
<br /> 
<nobr > Change the width of browser’ s window and make it smaller than this line. What 
happens? 
</nobr > 
</body> 
</html> 


例 2. 23 在 浏览 器 中 显示 的 效果 如 图 2. 9 所 示 。 


@ br & nobr tags - Windows Internet Explorer fees) 
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we 85H É br & nobr tags 


This text is on the first line. 
And this text is on the second line. 
Change the width of browser’ s window and make it smaller 


图 2.9 br 和 nobr 标签 


二 nobr 二 标签 用 来 禁止 这 个 标签 间 的 文本 的 任何 换行 。 

提示 : 从 所 p 之 标签 举例 可 以 知道 ,在 网 页 制作 中 无 法 使 用 回 车 或 者 空格 来 完成 强制 换 
行 或 增加 字符 间 空 格 的 功能 。 强 制 换行 使 用 二 br 二 标签 ,强制 不 换行 则 使 用 标签 二 nobr 志 ， 
这 个 标签 对 换行 可 能 引起 误 读 的 公式 一行 长 数字 等 尤其 有 用 。 但 注意 这 个 标签 是 HTML 
的 产物 ,在 HTML 设计 方法 中 已 经 不 再 使 用 (虽然 浏览 器 还 可 以 识别 ), 将 来 学 习 CSS 时 ， 
有 更 为 规范 的 办 法 实现 该 功能 。 

如 前 所 述 ,HTML 只 识别 文档 中 的 一 个 空格 ,多 余 空 格 一 律 忽略 ,如 果 要 加 入 多 个 空 
格 ,可 以 用 “&.nbsp;”(non-breaking space) 插 入 一 个 空格 , 即 非 换行 空格 ,反复 使 用 它 可 以 
在 文本 中 加 入 任意 多 个 空格 。 


2.2.5 水 平 线 


去 hr> 会 在 HTML 页 面 中 创建 一 条 水 平 线 。 
hr 元 素 是 一 个 空 元 素 , 用 来 分 隔 HTML 页 面 中 的 内 容 。 
水 平 线 语法 : 
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<hr align= "left|center |right" size = "pixels" width = "pixels or %" color = "color or color 

code" /> 

size: 水 平 线 的 高 度 ( 粗 细 ) 。 

width: 水 平 线 的 宽度 。 

color: 水 平 线 的 颜色 ,使 用 颜色 名 称 或 是 RGB 颜色 代码 。 一 些 常见 的 颜色 和 颜色 代码 
如 表 2. 1 所 示 。 


表 2.1 颜色 一 一 RGB 代码 对 照 表 


Color Color Code 
black #000000 
blue + 0000ff 
brown # a52a2a 
cyan # OOffff 
gray # 808080 
green # 008000 
ivory # {{fffo 
orange # ffa500 
pink # ffc0cb 
red # {10000 
white + ffffff 
yellow # ffff00 


提示 : 二 hr 二 是 又 一 个 空 标签 。 需 要 说 明 的 是 上 述 二 hr 二 标签 内 出 现 的 属性 都 是 
HTML 时 代 的 产物 , 按 严 格 的 HTML 标准 已 经 不 再 使 用 。 为 什么 本 教材 还 要 讲解 规范 的 
HTML 不 再 使 用 的 属性 呢 ? 这 里 有 两 点 考虑 : 其 一 是 让 读者 可 以 看 懂 当 前 仍然 大 量 存在 
的 HTML 代码 ; 其 二 是 当 第 3 EHS CSS 的 相关 内 容 时 ,读者 通过 对 比 可 以 更 好 地 理解 
为 什么 CSS 的 办 法 要 优 于 现在 这 种 在 标签 内 大 量 加 入 属性 的 办 法 ,对 HTML + CSS 这 一 
当前 高 效 的 静态 网 页 开发 有 更 深刻 的 理解 。 


2.2.6 注释 


注释 标签 (二 ! 一 … 一 二 ) 用 来 在 源 代码 中 插入 一 段 注释 。 注 释 会 被 浏览 器 所 忽略 。 用 
注释 来 解释 编写 的 代码 ,可 以 在 以 后 再 次 编辑 源 代码 时 帮助 理解 。 

注释 中 也 可 以 存放 一 些 特定 程序 信息 ,在 这 种 情况 下 它们 对 用 户 将 是 不 可 见 的 ,但 是 对 
程序 仍然 是 可 见 的 。 一 个 很 好 的 实际 应 用 是 把 脚本 或 者 样式 元 素 的 文本 放 在 注释 中 ,以 防 
止 早期 不 支持 脚本 或 样式 的 浏览 器 把 它们 当成 普通 文本 显示 出 来 。 


注释 语法 : 

<! -- comments -一 > 

例 2.24 使 用 注释 使 代码 更 具 可 读 性 。 
<html> 


<head> 
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<title> horizontal rules & comments </title> 
</head> 
< body > 
<h3 > This text is on the first line.</h3> 
<hr /> <! -- default attribute of hr element 一 一 > 
<h3 align="center"> And this text is on the second line. </h3 > 
<! -- absolute width of hr element --> 
<hr align="center" size = "12" width = "500" color = "blue"/> 
<! -- <h3> This third line is commented.</h3> -一 > 
</body> 
</html> 


在 浏览 器 中 的 显示 效果 如 图 2. 10 所 示 。 


@} horizontal rules & comments - Windows Internet Explorer clos 


Go- [E] DAExample\Example2-24.! ~| 她 | x | | 月 Sear pr 


r SRR Æ horizontal rules & comments 


This text is on the first line. 


And this text is on the second line. 


图 2.10 水 平 线 和 注释 


提示 : 与 许多 计算 机 语言 一 样 ,HTML 文档 也 提供 注释 功能 。 浏 览 器 会 忽略 此 标签 中 
的 文字 (可 以 是 许多 行 ) 而 不 显示 在 窗口 中 。 注 释 标 签 可 以 为 文档 加 上 说 明 , 也 可 以 为 了 调 
试 方便 而 暂时 让 部 分 内 容 不 显示 。 


2.2.7 WeA<div> 


<div> REE HTML 文档 中 定义 了 一 个 独立 的 分 区 或 者 部 分 。 
二 div 二 标签 通常 用 来 将 块 级 元 素 分 组 归 类 以 便 用 样式 表 CSS 来 格式 化 它们 。 
WICH (<div>) iH: 


<div> content (text, image or table)</div> 
例 2.25 使 用 节 元 素 。 


<html> 
<head> 
<title> Use division </title> 
</head> 
<body> 
<div style = "color:green"> <! -- define a section with all contents in green --> 
<h3>This is a header </h3 > 
<p>This is a paragraph. </p> 
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</div> 
</body> 
</html> 


项 目 2.2 Walker Club 主页 (index. html 版 本 2). 


<html > 
<head> 
<title> 沃 克 俱 乐 部 欢迎 您 </title> 
</head> 
<body> 


<hl align = "center"> 响 们 走 着 瞧 一 一 欢迎 光临 沃克 俱乐部 </hl ><! -- 显示 主 标题 -一 > 
<hr width= "80%" /> <! -- 标题 下 的 横 线 设 定 为 窗口 宽度 的 80% --> 
<h3 > 走路 ,简单 有 效 的 健身 之 道 </h3 > 
<div style = "text - indent:1.5em"> <! -- 设 定 首 行 缩 进 --> 
<p> 走 路 是 人 类 本 能 的 身体 活动 , 人 类 身体 结构 就 是 为 步行 设计 的 。 问 题 是 , 随 着 汽车 等 代步 
工具 的 普及 ,人 们 ”* 好 逸 恶 劳 "的 条 件 和 理由 越 来 越 充 足 , 以 致 基本 的 走路 功能 都 有 些 退化 了 。 根 据 美 
国 疾病 控制 与 预防 中 心 的 研究 ,有 高 达 75 % 的 美国 人 每 天 运动 量 不 到 30 分 钟 ,大 部 分 人 几乎 成 天 坐 
在 椅子 上 ,是 不 折 不 扣 的 * 沙 发 土豆 "。 反 观 我 们 中 国 的 现实 情形 , 随 着 经 济 的 发 展 ,汽车 的 大 量 使 用 
及 其 他 因素 ,导致 缺乏 锻炼 ,体形 肥胖 的 人 越 来 越 多 。</p> 
<p> 走 路 健身 又 健 脑 。 我 国 自古 就 有 “ 走 为 百 练 之 祖 " 的 健身 经 验 谈 , 其 中 传统 医学 认为 , 双 脚 
是 人 体 的 健康 之 根 。 走 路 刺激 脚底 穴位 ,能 每 筋 通 络 , 活 血 顺 气 , 强身 健 体 。 同 时 ,现代 运动 医学 研究 
也 证 实 : 走路 时 ,骨骼 ,肌肉 韧带、 神经 末梢 都 要 参加 运动 ,从 而 促进 血液 循环 ,调节 大 脑 皮层 的 活动 
功能 , 促使 身体 各 种 激素 分 泌 ,使 人 心情 愉悦 。 走 路 防 病 并 延缓 衰老 。 最 新 的 医学 研究 表明 ,一 周 健 
步 走 7 小 时 以 上 ,可 以 降低 20 % FLARE 30 % 心脏 病 和 50% 糖尿 病 的 软 患 率 , 而 中 老年 人 每 天 散步 
2.4 公 里 以 上 ,心脏 病 发 作 率 将 降低 50% 。</p> 
</div> 
<hr /> 
<div> 
<! -- 这 部 分 用 来 定义 版 权 声 明 及 联系 方式 -一 > 
</div> 
</body> 
</html> 


项 目 2. 2 在 浏览 器 中 的 显示 效果 如 图 2. 11 所 示 。 
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图 2.11 改良 的 Walker Club 主页 
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div 元 素 经 常用 于 和 CSS 一 起 来 布局 网 页 。 

ER: 文本 标签 的 学 习 到 这 里 就 结束 了 。 这 些 只 是 最 基本 的 标签 ,由 于 篇 幅 的 关系 , 教 
材 不 可 能 把 所 有 的 标签 与 属性 都 涉及 到 ,完整 的 标签 及 定义 请 看 书后 附录 。 在 例 2.25 和 项 
目 2.2 中 的 <<div 之 标签 都 出 现 了 以 前 没有 讲 到 的 属性 ,这 些 将 引导 更 深入 地 学 习 Web 应 
用 技术 。 


2.3 超级 链接 


在 网 络 术语 中 ,一 个 超级 链接 是 网 络 中 一 个 资源 的 标识 (一 个 地 址 ) 。 超 级 链接 可 以 指 
向 网 络 上 的 任何 资源 : 一 个 HTML 页 面 .一 幅 图 片 一 个 声音 文件 一 个 电影 等 等 。 锚 是 一 
个 用 来 定义 目标 在 文档 内 部 的 超级 链接 目标 的 术语 。 但 HTML 锚 元 素 二 a 二 既 可 被 用 来 
定义 超级 链接 也 可 以 被 用 来 定义 页 内 锚 链接 。 

a 元 素 通常 指 一 个 链接 或 超级 链接 。 


2.3.1 二 a 二 标签 


例 2.26 用 二 a 二 标签 定义 了 一 个 链接 到 例 2. 25 的 链接 。 
例 2.26 最 简单 的 超 链接 。 


<html> 
< body> 
<a href = "Example2 — 25. html"> Link to Example 2. 25 </a > 
</body> 
</html> 


在 浏览 器 中 的 显示 效果 如 图 2. 12 所 示 。 


Link to Example 2.25 


图 2. 12 用 一 a> 标 签 来 链接 另 一 个 文档 
超 链接 (a 元 素 ) 语 法 : 
<ahref = "url"> Link text </a> 


二 a 二 元 素 最 重要 的 属性 是 href 属性 , 它 定 义 了 链接 的 “目的 地 址 ”。 起 始 标签 包含 了 
关于 链接 的 属性 。 而 元 素 内 容 (链接 文本 ) 定 义 了 显示 的 部 分 。 

注意 : 元 素 内 容 不 一 定 必须 是 文本 ,图 片 或 者 任何 其 他 HTML 元 素 上 都 可 以 创建 
链接 。 

在 浏览 器 中 ,默认 情况 下 ,未 被 访问 的 链接 是 蓝 色 带 有 下 划 线 ,已 被 访问 的 链接 为 紫色 
带 下 划 线 ,活动 链接 为 红色 带 下 划 线 。 

提示 : 超 链接 是 Web 的 最 重要 特性 ,完成 这 个 功能 的 是 所 a> 标 签 。 毛 a> 标 签 取 自 于 
英文 anchor( 锚 点 ) , 指 的 是 本 文档 中 另外 一 个 需要 链接 的 位 置 。 事 实 上 ,在 所 a 二 标签 中 设 
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定 不 同 的 属性 ,不 仅 可 以 完成 到 本 文档 中 的 链接 ,也 可 以 完成 到 其 他 文档 .其 他 网 站 的 链接 ， 
完成 自动 调用 电子 邮件 客户 端 及 文件 下 载 等 。 本 节 将 详细 讲解 这 些 不 同属 性 的 应 用 。 


2.3.2 ”路径 和 目录 


路 径 是 用 目录 名 和 文件 名 ,指定 文件 系统 中 的 一 个 独一无二 的 位 置 。 路 径 的 层次 遵循 
目录 的 树 状 层次 结构 ,常见 的 格式 是 用 和 斜 杠 (*/”) 和 反 斜 杠 (“\”) 分 隔 开 目录 名 来 代表 目录 。 
路 径 在 计算 机 科学 中 应 用 广泛 ,通常 在 现代 的 操作 系统 中 表示 目录 /文件 关系 ,同时 它 更 是 
统一 资源 定位 符 (URL) 的 必要 组 成 。 

系统 既 可 以 用 绝对 路 径 也 可 以 用 相对 路 径 。 一 个 完全 的 路 径 即 绝对 路 径 ,不 管 当前 的 
工作 目录 或 链接 的 路 径 改 变 与 否 ,都 指向 文件 系统 中 的 同一 个 位 置 。 它 通常 直接 引用 到 根 
目录 。 相 对 路 径 是 一 个 相对 于 当前 用 户 或 应 用 程序 的 工作 目录 的 路 径 , 也 就 是 只 从 当前 用 
户 或 应 用 程序 的 工作 目录 开始 引用 ,并 不 给 出 完整 的 路 径 。 

例 2.27 绝对 路 径 。 


D:\WebApp\Project\ index. html 
http://www. walkerclub. net/ index. html 


例 2.28 相对 路 径 。 


Project\ index. html 
index. html 


就 像 上 面 例子 中 看 到 的 那样 ,绝对 路 径 包含 了 全 部 路 径 , 而 相对 路 径 只 包含 其 中 的 一 
部 分 。 

绝对 路 径 的 典型 特点 就 是 通过 域名 来 指向 位 于 另 一 域名 的 网 页 元 素 。 例 如 ,链接 到 
Google 网 站 一 一 需要 做 的 就 是 像 例 2. 29 那样 把 域名 包含 到 URL 中 。 

例 2.29 超 链接 到 另外 一 个 网 站 要 使 用 绝对 路 径 。 


<a href = "http://www. google. com"> Search in Google </a> 


如 果 引 用 的 一 个 网 页 元 素 是 在 相同 的 域名 下 ,那么 相对 路 径 是 个 好 的 选择 。 相 对 路 径 
根据 链接 所 在 的 页 面 不 同 而 改变 。 用 相对 路 径 创 建 链接 有 4 条 规则 : 
(1) 链接 到 当前 目录 内 的 文件 。 


<ahref = "filename. html"> Link text </a> 
(2) 链接 到 子 目 录 内 的 文件 。 

<a href = "subdirectory/filename. html"> Link text </a> 
(3) 链接 到 父 目 录 内 的 文件 。 

<ahref = "../filename.html"> Link text </a> 


“,./” 表 示 返 回 到 父 目 录 。 
(4) 链接 到 同 级 目录 内 的 文件 。 


<ahref = "../sibling directory/filename. html"> Link text </a> 
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“.. /sibling directory/” 表 示 先 返回 到 父 目 录 , 然 后 进入 到 同 级 目录 。 

提示 : 在 网 页 设计 中 ,一 定 要 清楚 绝对 路 径 (Absolute Path) 和 相对 路 径 (Relative 
Path) 的 概念 。 绝 对 路 径 只 是 在 引用 本 网 站 之 外 其 他 网 站 时 ,把 其 他 网 站 的 绝对 路 径 即 完整 
URL 放 入 href 属性 值 中 ,使 用 相对 简单 。 而 在 创建 自己 的 网 站 时 ,大 量 使 用 的 是 相对 路 
径 , 这 样 才 能 使 得 整个 网 站 项 目 被 放置 到 不 同 的 硬盘 空间 或 者 域名 时 ,可 以 保证 相互 链接 的 
完整 性 与 一 致 性 。 

熟练 掌握 相对 路 径 是 用 好 计算 机 语言 的 前 提 , 在 HTML AH F, ERANG aA 
的 前 提 , 所 以 要 认真 学 习 掌 握 本 节 链 接 到 不 同 关系 目录 的 文件 时 ,一 a 二 标签 中 相对 路 径 引 
用 的 不 同 写法 。 下 一 节 将 讲解 具体 的 例子 。 


2.3.3 组 织 网 站 目录 结构 


在 开始 创建 更 多 的 HTML 页 面 之 前 ,需要 把 文件 组 织 一 下 。 目 前 ,项 目 目录 (文件 夹 ) 
中 只 有 一 个 index. html 文件 。 如 果 把 网 页 .图 像 和 其 他 的 资源 组 织 进 一 组 不 同 的 目录 ( 文 
件 夹 ) 中 ,将 更 便于 管理 。 现 在 给 予 Walker Club 一 个 如 图 2. 13 和 图 2. 14 的 有 意义 的 目录 
结构 。 
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图 2.13 项 目 目录 结构 图 2.14 Walker Club 网 站 的 目录 结构 
下 面 的 4 个 例子 根据 前 一 节 学 习 的 相对 路 径 的 4 条 规则 ,介绍 了 如 何 参照 图 2. 14 中 的 


关系 创建 超级 链接 。 
例 2.30 从 articlel. html 中 链接 到 article2. html. 


<a href= "article2.html"> article2 </a> 

例 2.31 从 index. html 中 链接 到 article2. html. 
<a href = "introduction/article2. html"> article2 </a> 
例 2.32 从 activity]. html 中 链接 到 index. html. 
<a href= "../index. html"> Home </a> 

例 2.33 从 articlel. html 中 链接 到 activity]. html. 
<a href = "../activity/activityl. html">activityl </a> 


提示 : 在 设计 网 站 时 ,各 种 文件 组 织 到 目录 (文件 夹 ) 中 的 方法 不 是 唯一 的 ,只 要 便于 设 
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计 者 或 者 设计 团队 管理 维护 即 可 。 一 般 原则 来 说 ,可 以 按 网 站 栏目 或 者 版 块 进行 文件 分 类 ， 
或 者 按照 文件 被 访问 安全 权限 进行 分 类 ,建议 主 目 录 下 有 一 个 独立 的 images 目录 ,便于 进 
行 图 片 的 管理 ; 网 站 目录 层次 不 要 太 深 ,建议 不 超过 3 层 ,便于 设计 者 维护 管理 ; 目录 名 及 
文件 名 不 要 使 用 中 文 , 因 为 Web 是 全 球 网 络 ,中 文 目录 名 或 文件 名 可 能 会 对 网 址 的 正确 显 
示 造 成 困难 。 

这 里 给 出 了 Walker Club 网 站 的 文件 及 目录 (文件 夹 ) 结 构 , 同 时 举例 说 明 通 过 相对 路 
径 链 接 到 目标 文件 时 href 属性 的 写法 。 今后 要 讲 到 的 二 img 记 标签 在 引用 图 片 时 ,将 会 用 
到 同样 的 相对 路 径 引 用 办 法 。 


2.3.4 target 属性 


<a> pr target 属性 定义 了 被 链接 的 文档 将 在 哪里 打开 。 下 面 的 代码 ( 例 2. 26 的 
修改 版 ) 将 在 一 个 新 浏览 器 窗口 打开 被 链接 的 文档 。 

例 2.34 在 一 个 新 浏览 器 窗口 打开 被 链接 的 文档 。 

<html > 

<body> 

<a href = "Example2 - 25. html" target = "_blank"> Link to Example 2.25 </a> 

</body> 

</html> 

比较 例 2. 26 和 它 的 修改 版 本 例 2. 34。 单 击 例 2. 26 页 面 中 的 Link to Example 2. 25 
时 ,浏览 器 在 当前 窗口 显示 例 2. 25( 它 替换 了 例 2. 26 的 页 面 )。 但 是 单 击 例 2. 34 页 面 上 的 
Link to Example 2. 25, 例 2. 25 会 在 一 个 新 浏览 器 窗口 中 打开 ( 例 2. 34 仍然 留 在 原来 窗口 
中 )。 这 样 的 好 处 是 显而易见 的 一 一 访客 在 新 浏览 器 窗口 中 打开 链接 ,因而 他 们 不 会 被 迫 或 
意外 离开 最 初 的 网 站 。 

提示 : 二 a 二 标签 的 target 属性 有 4 个 可 选 值 来 确定 链接 在 什么 地 方 打开 ,其 中 在 新 的 
浏览 器 窗口 打开 (target 二"_blank") 是 最 常见 的 应 用 。 这 种 效果 可 以 在 CSS PEM, 
HTML 建议 使 用 CSS 方法 实现 。 


2.3.5 链接 到 页 面 内 部 的 一 个 位 置 


当 过 a 二 元 素 指向 一 个 资源 时 , 它 在 术语 中 叫做 链接 或 超 链接 。 但 是 当 二 a 二 元 素 定义 
文档 内 部 的 一 个 地 址 时 ,我 们 叫 它 页 内 链接 。 前 面 已 经 讨论 了 超 链接 ,本 节 讨 论 页 内 链接 。 

HAE T <a> nR HHY name 属性 ,二 a 二 元 素 就 在 HTML 文档 内 部 定义 了 一 个 书签 
标记 。 

书签 标记 语法 : 

<a name = " label"> Any content </a> 

链 向 一 个 书签 标记 语法 : 

<a href =" + label"> Link text </a> 


href 属性 中 的 “# ”定义 了 一 个 链 向 书签 标记 的 链接 。 
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例 2.35 创建 页 内 链接 。 


<html> 
<head> 
<title> Link to a bookmark </title> 
</head> 
< body> 
<p><a href = " # C6"> See Chapter 6 </a ></p> 
< h2 > Chapter 1 </h2 > 
< p> This chapter discusses -</p> 
<br /><br /><br /> 
< h2 > Chapter 2 </h2 > 
<p> This chapter discusses -</p> 
<br /><br /><br /> 
< h2 > Chapter 3 </h2 > 
<p> This chapter discusses -</p> 
<br /><br /><br /> 
<h2 > Chapter 4 </h2 > 
<p> This chapter discusses -</p> 
<br /><br /><br /> 
<h2> Chapter 5 </h2 > 
<p> This chapter discusses -</p> 
<br /><br /><br /> 
<h2><a name = "C6"> Chapter 6 </a></h2> 
<p> This chapter discusses -</p> 
<br /><br /><br /> 
< h2 > Chapter 7 </h2 > 
<p> This chapter discusses -</p> 
<br /><br /><br /> 
<h2 > Chapter 8 </h2 > 
<p> This chapter discusses «</p> 
</body > 
</html> 


例 2. 35 在 浏览 器 中 的 效果 如 图 2. 15 所 示 。 

书签 标记 在 任何 方式 下 都 不 会 显示 ,它们 对 浏览 者 是 不 可 见 的 。 页 内 链接 通常 被 用 于 
在 篇 幅 很 大 的 文档 的 开头 创建 “目录 "一 一 文档 中 的 每 一 章 被 给 予 一 个 书签 标记 ,而 文档 的 
顶部 放置 链 向 这 些 书 签 标 记 的 页 内 链接 。 

提示 : 二 a 二 标签 原意 锚 点 (Anchor) 指 的 就 是 网 页 内 的 跳 转 , 也 形象 地 称 做 书签 
(Bookmark)。 从 用 法 上 来 看 ,网 页 内 跳 转 需 要 对 二 a 记 标 签 成 对 地 使 用 href 和 name 两 个 
属性 ,name 属性 来 定义 书签 位 置 ,href 属性 来 链接 到 这 个 属性 指定 的 书签 位 置 。 

由 于 人 的 阅读 习惯 ,在 网 页 设计 时 ,网 页 宽度 不 能 超过 显示 屏 , 但 长 度 相 对 可 以 任意 长 ， 
以 方便 人 们 使 用 鼠标 滚轮 上 下 翻 屏 。 在 这 种 网 页 设计 中 ,灵活 运用 锚 点 的 书签 功能 ,网 页 内 
的 上 下 跳 转 可 以 使 网 站 用 户 迅速 定位 要 阅读 的 内 容 。 

至 此 ,读者 已 经 学 习 了 一 a 标 签 的 两 个 最 重要 的 超 链接 用 法 :; 资源 链接 (链接 到 其 他 
网 页 ) 和 锚 点 或 书签 (网 页 内 跳 转 ) 。 
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ge te [4 Link to a bookmark = 


See Chapter 6 
Chapter 1 


This chapter discusses … 


Chapter 2 


This chapter discusses … 


Chapter 3 


This chapter discusses … 


图 2.15 链 向 网 页 内 部 的 书签 


2.3.6 邮件 链接 


基本 上 每 个 网 站 都 会 有 一 两 个 mailto 链接 ,以 便 让 人 们 能 从 网 页 中 直接 发 送 电子 
邮件 。 
一 个 标准 的 邮件 链接 是 这 样 的 : 


<a href = "mailto: someone@site. com"> Link text </a> 
例 2.36 创建 邮件 链接 。 


<html> 
<body> 


<a href = "mailto: webmaster @ walkerclub. net"> webmaster (@ walkerclub. net (Click to 
Email Me)</a> 
</body > 
</html> 


例 2.36 在 浏览 器 中 显示 效果 如 图 2. 16 所 示 。 


webmaster@walkerclub. net (Click to Email Me) 


K 2.16 链 向 E-mail 的 链接 


单 击 例 2. 16 中 的 链接 ,就 像 任何 邮件 链接 的 预期 效果 那样 一 超级 链接 文本 会 激活 一 
个 已 经 填 好 收 件 人 地 址 的 新 邮件 信息 窗口 (只 对 安装 的 电子 邮件 客户 端 ,如 Outlook 
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Express, Foxmail 等 有 效 ) ,非常 方便 。 

提示 : 对 指向 电子 邮件 的 链接 , 单 击 后 即 可 打开 电子 邮件 客户 端 (如 Outlook Express, 
Foxmail 等 ) 并 自动 填写 好 收 件 人 ,但 前 提 是 必须 使 用 这 些 电邮 客户 端 进行 电子 邮件 的 收发 
(一 般 需要 支持 POP3 协议 ) 。 如 果 使 用 基于 网 页 的 邮箱 Webmail, 则 本 功能 无 法 使 用 。 所 
以 为 方便 以 上 两 种 电子 邮件 用 户 发 出 邮件 ,在 链接 的 热点 文本 上 最 好 也 给 出 实际 的 电邮 地 
址 ,以 便 Webmail 用 户 使 用 拷贝 粘贴 的 办 法 把 电邮 地 址 填写 到 收 件 人 处 。 

“mailto:” 还 可 以 实现 同时 给 多 人 发 邮件 以 及 事先 设 定好 标题 (Subject) 及 内 容 
(Body) 等 。 


2.3.7 创建 下 载 链接 


有 时 网 站 需要 允许 访客 下 载 一 些 内 容 到 他 们 自己 的 个 人 电脑 内 。 如 一 些 大 型 文档 和 
PDF 文件 .视频 或 者 歌曲 。 但 是 大 多 数 文件 会 被 自动 地 在 浏览 器 窗口 中 打开 而 不 是 被 下 载 
保存 。 

这 里 介绍 两 种 解决 办 法 一 一 一 种 简单 方法 和 一 种 稍 复杂 的 方法 。 第 一 种 需要 网 站 用 户 
来 做 绝 大 多 数 工作 ,而 第 二 种 要 求 网 站 制作 人 员 为 要 下 载 的 文件 做 一 些 工作 。 

方法 一 : 

(1) 把 要 被 下 载 的 文件 上 传 到 网 站 服务 器 的 指定 目录 。 

(2) 编辑 网 页 并 添加 一 个 标准 的 锚 链 接 到 文档 中 。 


<a href =" large_document. pdf"> Download the large document </a> 


(3) 在 链接 旁 添 加 文字 告诉 访客 他 们 需要 右 击 链接 来 下 载 它 。 

(4) 访客 右 击 链接 并 选择 “目标 另存 为 "来 把 文档 保存 到 电脑 上 。 

如 果 访 客 忽略 了 这 个 步骤 ,需要 用 第 二 种 方法 把 文件 转换 为 会 被 绝 大 多 数 浏览 器 自动 
下 载 的 文件 类 型 : 一 个 rar 文件 或 压缩 文件 。 

方法 二 ， 

Q) 用 WinRAR 压缩 软件 把 一 个 需要 被 下 载 的 文件 压缩 为 rar 文件 。 

(2) 把 rar 文件 上 传 到 网 站 服务 器 。 

(3) 编辑 页 面 ,为 这 个 rar 文件 添加 一 个 标准 锚 链 接 。 


<a href = "large document.rar"> Download the large document </a> 


要 点 ， 

大 多 数 操作 系统 有 一 些 内 置 的 压缩 软件 。 如 果 没 有 ,在 搜索 引擎 中 查找 WinRAR 来 下 
载 安装 。 

这 种 技术 可 以 用 于 图 片 . 电 影 、 音乐 和 文档 以 及 PDF 文件 。 任 何 可 以 被 压缩 为 rar X 
件 的 东西 都 可 以 发 布 到 网 站 上 以 供 下 载 。 

提示 : 至 此 ,一 a> 标 签 的 重要 属性 及 应 用 学 习 完 毕 。 虽 然 只 是 一 个 <<a>> 标 签 , 但 和 不 
同 的 属性 、 不同 路 径 及 不 同 的 文件 格式 ,可 以 组 合成 非常 灵活 的 应 用 。 在 今后 更 多 其 他 标签 
的 学 习 中 ,读者 会 接触 到 超级 链接 新 的 应 用 。 

下 面 将 前 面 所 学 的 超 链接 应 用 到 Walker Club 网 站 上 。 
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2.3.8 超 链 接 综合 应 用 
项 目 2.3 沃克 俱乐部 主页 (index. html version 3) 。 


<html> 
< head > 
<title> 沃 克 俱 乐 部 欢迎 您 </title> 
</head> 
<body> 


<hl align = "center"> 了 咱们 走 着 瞧 一 一 欢迎 光临 沃克 俱乐部 </hl ><! -- 显示 主 标题 -- > 
<hr width= "80%" /> <! -- 标题 下 的 横 线 设 定 为 窗口 宽度 的 80% --> 
<div style = "text — align:center"> 
<! —- 使 用 target 属性 ,使 article2. html 在 新 窗口 打开 --> 
<p> 
<a href = "introduction/articlel. html" target = "_blank"> 健 走 的 方法 </a> &nbsp; 
&nbsp; &nbsp; 
<a href = "introduction/article2. html" target = " blank"> 健 走 装备 </a> &nbsp; &nbsp; 


&nbsp; 
<a href = "activity/activityl. html" target = "_blank"> 俱 乐 部 活动 </a> 
</p> 
</div> 
<h3 > 走路 ,简单 有 效 的 健身 之 道 </h3 > 


<div style = "text — indent:1.5em"> <! -- 设 定 首 行 缩 进 --> 
<p> 走 路 是 人 类 本 能 的 身体 活动 , 人 类 身体 结构 就 是 为 步行 设计 的 。 问 题 是 , 随 着 汽车 等 代 
步 工具 的 普及 ,人 们 ”好 和 逸 恶 劳 "的 条 件 和 理 巾 越 来 越 充足 ,以 致 基本 的 走路 功能 都 有 些 退化 了 。 根 据 
美国 疾病 控制 与 预防 中 心 的 研究 ,有 高 达 75 % 的 美国 人 每 天 运动 量 不 到 30 分 钟 ,大 部 分 人 几乎 成 天 
坐 在 椅子 上 ,是 不 折 不 扣 的 “沙发 土豆 "。 反 观 我 们 中 国 的 现实 情形 , 随 着 经 济 的 发 展 ,汽车 的 大 量 使 
用 及 其 他 因素 ,导致 缺乏 锻炼 ,体形 肥胖 的 人 越 来 越 多 。</p> 
<p> 走 路 健身 又 健 脑 。 我 国 自古 就 有 “ 走 为 百 练 之 祖 " 的 健身 经 验 谈 , 其 中 传统 医学 认为 , 双 
脚 是 人 体 的 健康 之 根 。 走 路 刺激 脚底 穴位 ,能 每 筋 通 络 ,活血 顺 气 , 强 身 健 体 。 同 时 ,现代 运动 医学 研 
究 也 证 实 : 走路 时 ,骨骼 .肌肉 .韧带 ,神经 末梢 都 要 参加 运动 ,从 而 促进 血液 循环 ,调节 大 脑 皮层 的 活 
动 功能 ,促使 身体 各 种 激素 分 泌 , 使 人 心情 愉悦 。 走 路 防 病 并 延缓 衰老 。 最 新 的 医学 研究 表明 ,一 周 
健步 走 7 小 时 以 上 ,可 以 降低 20 % 乳腺 癌 、30% 心脏 病 和 50 % 糖尿 病 的 输 患 率 , 而 中 老年 人 每 天 散步 
2.4 公 里 以 上 ,心脏 病 发 作 率 将 降低 50% </p> 
</div> 
<div style= "text - align:center"> <! -- 网 页 尾部 设 为 文本 居中 对 齐 --> 
<hr /> 
<p><a href ="mailto: webmaster @ walkerclub. net"> 和 我 联系 Email: webmaster @ 
walkerclub. net </a> 
</p> 
</div> 
</body> 
</html > 


项 目 2. 3 在 浏览 器 中 的 显示 效果 如 图 2. 17 所 示 。 
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图 2.17 改进 后 的 沃克 俱乐部 主页 (version 3) 


项 目 2.4 articlel 的 HTML 文档 (articlel. html). 


<html> 
<head> 
<title > 沃克 俱乐部 - 健 走 的 方法 </title> 
</head> 
<body> 
<! 一 将 本 网 页 首部 书签 设 为 top, 本 网 页 其 他 部 分 可 以 用 “回首 部 ”来回 到 首部 -> 
<p><a href ="../index. html" name = "top"> 主 页 </a> &nbsp; &nbsp; &nbsp; 


<! -- 使 用 target 属性 ,使 article2. html 在 新 窗口 打开 --> 
<a href = "article2. html" target = "_blank"> 健 走 装 备 </a> 
</p> 
<hr /> 
< h3 > 健 走 的 方法 </h3 > 
<p><a href = "4 jzyl">{itiE Z i</a></p> <! -- 设 定 网 页 内 跳 转 --> 
<div style= "text — indent: 1.5em"> 
<p> 健 走 即 俗称 的 快走 。 健 走 如 果 步 伐 适当 , 其 速度 也 不 亚 于 慢跑 。 在 现代 的 竞走 运动 中 ， 
一 些 运 动员 能 达到 3 分 30 秒 /公里 的 速度 ,一 个 优秀 的 竞走 运动 员 , 20 公里 只 需要 一 个 半 小 时 就 能 
完成 。 这 个 速度 对 于 跑 友 来 说 ,都 已 经 相当 快 了 。 与 跑步 相 比 ,快走 通常 更 持久 ,而 且 , 如 上 所 述 也 能 
达到 很 大 的 强度 , 足够 锻炼 心肺 功能 ,同时 还 能 发 展 腿 部 、 腰 部 和 背部 肌肉 的 力量 。</p> 
<p> 在 我 国 古 代 的 军队 中 ,就 有 一 种 急行 军 比 赛 ,要 求 土 兵 快走 完成 比赛 , 而 不 是 跑 , 当时 的 
距离 是 90 公里 ,要 求 在 8 个 小 时 之 内 完成 。 可 见 ,在 古代 就 有 用 快走 锻炼 身体 的 传统 。</p> 
<p> 健 走 比 慢 跑 好 的 地 方 也 有 几 点 ,一 是 不 容易 对 足 部 、 肢 躁 和 膝盖 造成 伤害 , 二 是 没有 特 
殊 的 要 求 ,只 要 不 妨碍 迈步 ,普通 服装 也 可 以 。</p> 
<p> 另 外 , 健 走 和 跑步 一 样 ,形式 也 是 多 种 多 样 的 , 可 以 在 海边 走 , 也 可 以 在 山上 走 , 还 可 以 
在 室内 走 ,但 健 走 也 有 一 个 标准 , 那 就 是 时 
速 不 能 低 于 6 公里 。</p> 
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<p><a name = "jzyl"> 健 走 的 动作 要 领 如 下 : gnbsp; &nbsp; &nbsp; </a><a href = " # top"> 
回首 部 </a></p> 
<ol> <! -- 设 定 排序 列表 ordered list --> 

<1i> 身 体 前 倾 3 一 5 E, 抬头, 肩 和 背 自 然 下 垂 , 挺 胸 , 收 腹 。</1i> 

<1i> 两 臂 必须 配合 摆动 ,手臂 摆动 的 高 度 不 得 高 于 胸 。</1i> 

<1i> 脚 跟着 地 要 柔和 ,快速 滚动 到 全 脚掌 着 地 。</1i> 

<1i> 两 脚 落地 时 以 内 侧 为 准 踩 成 一 条 直线 。</1i> 

<1i> 不 要 出 现 双 脚 都 腾空 的 现象 。</1i> 

<1i> 健 走 要 求 走路 跨 大 步 .速度 敏捷 、 双 臂 摆动 .抬头 挺 胸 , 比 慢跑 安全 ,也 比 散 步 有 效 。 


ai> 
</ol> 
</div> 


<div style = "text — align:center"> <! —— 网 页 尾部 设 为 文本 居中 对 齐 --> 
<hr /> 


<p><a href = "mailto: webmaster @ walkerclub. net"> 和 我 联系 Email: webmaster @ 
walkerclub. net </a></p> 
</div> 
</body> 
</html> 


项 目 2.4 在 浏览 器 中 的 显示 效果 如 图 2. 18 所 示 。 
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健 走 的 方法 

健 走 要 领 

健 走 即 俗称 的 快走 。 健 走 如 果 步 伐 适当 ， 其 速度 也 不 亚 于 慢跑 。 我 们 现代 的 竟 走 运动 中 ， 一 些 运 
动员 能 达到 3 分 30 秒 /公里 的 速度 ， 一 个 优秀 的 竞走 运动 员 ，20 公 里 只 需要 一 个 半 小 时 就 能 完成 。 这 个 

谴 度 对 于 哆 友 来 说 ， 都 已 经 相当 决 了 。 与 跑步 相 比 ， 快 直 肖 党 更 持久 ， 而 且 ， 如 上 所 述 也 能 达到 很 大 
的 强度 ， 足 够 锻炼 心肺 功能 ， 同 时 还 能 发 展 腿 部 、 腰 部 和 背部 肌肉 的 力量 。 


在 我 国 古代 的 军队 中 ， 就 有 一 种 急行 军 比赛 ， 要 求 士兵 快走 完成 比赛 ， 而 不 是 跑 ， 当 时 的 距 高 
是 90 公 里 ， 要 求 在 8 个 小 时 之 内 完成 。 可 见 ， 在 古代 就 有 用 快走 锻炼 身体 的 传统 。 


健 走 比 慢跑 好 的 地 方 也 有 几 点 ， 一 是 不 容易 对 足 部 、 脚 躁 和 肤 盖 造成 伤害 ， 二 是 没有 特殊 的 要 | 
求 ， 只 要 不 妨碍 迈步 ， 普 通 服装 也 可 以 。 


另外 ， 健 走 和 跑步 一 样 ， 形 式 也 是 多 种 多 样 的， 可 以 在 海边 走 ， 也 可 以 在 山上 走 ， 还 可 以 在 室内 
走 ， 但 健 走 也 有 一 个 标准 ， 那 就 是 时 速 不 能 低 于 6 公里 。 


健 走 的 动作 要 领 如 下 : 回首 部 
1. 身体 前 倾 3~5 度 , 抬头 ， 肩 和 背 自然 下 垂 ， 挺 胸 ， 收 腹 。 > 


2.18 articlel. html 页 面 效果 


TA 2.5 article? 的 HTML 文档 (article2. html). 


<html> 
<head> 


<title > 沃克 俱乐部 - 健 走 装备 </title> 
</head> 
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<body> 
<! -- 将 本 网 页 首部 书签 设 为 top, 本 网 页 其 他 部 分 可 以 用 “回首 部 ”来 回 到 首部 -> 
<p><a href ="../index. html" name = "top"> 主 页 </a> &nbsp; &nbsp; &nbsp; 
<! -- 使 用 target 属性 ,使 article2. html 在 新 窗口 打开 --> 
<a href = "articlel. html" target = "_ blank"> 健 走 的 方法 </a> 
</p> 
<hr /> 
< h3 > 健 走 装 备 </h3 > 
<div style= "text — indent: 1.5em"> 
<p> 健 走 因 其 老少 皆 宜 ,锻炼 时 对 身体 损伤 小 ,对 预防 心血 管 病 及 减肥 都 是 益处 多 多 , 正在 
成 为 一 种 不 亚 于 慢跑 的 时 尚 运动 。 健 走 毕 竟 不 同 于 平常 的 步行 ,是 一 种 有 一 定 强 度 的 健身 运动 ,所 
以 运动 装备 (主要 是 鞋 ) 是 需要 考虑 的 重要 方面 。</p> 
< p> 对 于 健 走 运动 鞋 的 选择 可 谓 是 有 许多 不 同 的 说 法 , 本 文 为 原创 ,来 提出 自己 的 看 法 。</p> 
<p> 网 上 的 关于 健 走 鞋 选择 的 文章 相当 多 ,但 绝 大 多 数 相互 拷贝 粘贴 ,总 结 出 来 也 就 如 下 三 
种 是 典型 说 法 : </p> 
<ol><! -- 设 定 排 序列 表 ordered list --> 
<1i> 慢 跑鞋 是 一 个 较 好 的 选择 ; </li> 
<1i> 慢 跑鞋 不 好 ,应 该 选择 健步 鞋 ; </li> 
<1i> 选 择 平底 、 软 底 鞋 , 比如 休闲 鞋 就 是 较 好 的 选择 。</1i> 
</ol> 
<p> 先 来 看 一 下 健 走运 动 中 脚 的 运动 方式 ,在 这 一 点 上 大 家 并 没有 异议 : 脚跟 先 落地 ,然后 
迅速 滚动 到 前 脚掌 ,最 后 脚趾 用 力 路 地 离开 。</p> 
<p> 健 走 和 普通 走路 类 似 , 只 是 最 后 脚趾 用 力 跨 地 离开 这 一 环节 是 多 数 普通 步行 者 所 没有 
做 到 的 ,仔细 看 的 话 ,健步 是 更 快 更 有 弹性 的 步行 。</p> 
<p> 知 道 健步 运动 的 原理 , 再 来 分 析 对 鞋 的 要 求 : 因为 脚跟 先 着 地 , 所 以 对 鞋 的 后 跟 要 求 就 
要 有 较 好 的 减 震 (或 叫 避 震 ) 人 性 能 ,所 以 鞋 后 跟 应 该 较 厚 , 鞋 后 跟 较 厚 可 以 完成 减 震 的 要 求 ,现在 所 说 
的 气垫 运动 鞋 ,多 数 也 是 放 在 脚后跟 上 。 肢 前 掌 位 置 应 该 较 薄 (相对 于 鞋 后 跟 ), 便 于 脚 前 掌 联 合 脚趾 
发 力 向 前 有 路 的 动作 ; 鞋 的 最 前 部 应 该 上 放 , 因 为 脚趾 路 地 时 ,脚后跟 及 前 掌 已 经 都 离 地 了 ,所 以 鞋 
这 样 的 设计 保证 路 地 动作 不 受 鞋 前 部 的 阻碍 。</p> 
<p> 综 上 所 述 , 当前 市 面 上 销售 的 慢跑 鞋 已 经 满足 了 这 样 的 要 求 , 所 以 慢跑 鞋 是 一 个 不 错 的 
选择 。 那 为 什么 还 有 健 走 用 慢跑 鞋 不 好 或 者 用 平底 鞋 等 都 看 来 都 很 有 道理 的 说 法 呢 ?</p> 
<p> 来 分 析 第 2 条 : 慢跑 鞋 不 好 ,应 该 选择 健 走 鞋 。 这 种 说 法 从 后 半 段 来 看 是 一 个 好 主意 ， 
但 毕竟 现在 极 少 有 见 到 运动 奎 厂 家 生产 专门 的 健 走 鞋 ,所 以 健 走 爱好 者 只 有 等 待 。 本 说 法 的 前 半 段 
说 慢跑 鞋 不 好 是 说 慢跑 与 健 走 要 求 不 同 ,说 慢跑 是 前 脚掌 先 落地 , 所 以 慢跑 鞋 是 前 脚掌 减 震 性 较 强 ， 
而 鞋 后 跟 减 震 性 弱 。 而 实际 情况 是 : 现在 市 面 上 的 慢跑 鞋 恰恰 是 后 跟 有 减 震 ( 多 数 气 垫 都 在 后 跟 )， 
脚 前 掌 没有 减 震 ,原因 也 简单 : 大 众 平时 休闲 、 旅 游 . 跑 步 都 用 慢跑 鞋 ,最 关键 的 是 ,普通 人 即使 在 慢 
跑 锻 炼 时 ,多 数 也 是 后 跟 先 着 地 或 者 是 后 跟 与 脚掌 同时 着 地 的 ,很 少 有 像 专业 长 跑 运 动员 那样 脚 前 
掌 着 地 ,后 跟 根 本 不 着 地 (专业 长 跑 运 动员 也 不 用 平时 市 面 上 的 慢跑 鞋 了 ,他 们 用 的 可 是 专业 的 跑 
鞋 ), 所 以 ,第 2 种 说 法 是 对 当前 慢跑 鞋 的 结构 明白 不 多 ,对 普通 老百姓 慢跑 的 动作 不 了 解 所 致 。</p> 
<p> 来 分 析 第 3 条 : 选择 平底 、 软 底 鞋 , 休闲 鞋 就 是 较 好 的 选择 。 本 说 法 没什么 大 的 问题 ， 
平时 大 家 都 是 这 样 穿 休闲 鞋 的 。 但 注意 健 走 是 至 少 要 每 小 时 6 千 米 以 上 的 速度 ,一 次 至 少 30 分 钟 以 
上 的 运动 时 间 , 这 样 的 考虑 ,普通 平底 鞋 对 脚后跟 没有 减 震 , 脚 受 到 的 冲击 就 较 大 ,时 间 长 会 对 脚 有 
坏处 ,所 以 ,本 来 健 走 是 为 健康 ,结果 时 间 长 倒 使 身体 某 个 部 分 出 问题 ,这 是 不 划算 的 。 还 有 一 点 ,就 
是 平底 鞋 一 般 前 部 也 不 上 起, 尤其 是 现在 比较 流行 的 板鞋 ,这 对 长 时 间 走 路 是 不 好 的 。 板 鞋 是 用 来 
进行 滑板 运动 用 的 ,平底 , 鞋 前 部 也 是 平 的 ,便于 整个 鞋子 紧 贴 滑板 并 控制 滑板 ,这 种 鞋 看 起 来 也 美 
观 , 鞋 上 可 以 加 上 各 种 各 样 的 图 案 , 功 能 上 却 不 强 , 进行 滑板 运动 时 合适 ,但 它 却 不 适合 大 运动 量 健 
走 。</p> 
<p> 最 后 说 一 下 ,篮球 鞋 和 网 球鞋 也 不 适合 健 走 , 它 们 是 为 了 篮球 和 网 球 这 两 项 运动 特有 的 
迅速 起 动 、 制 动 、 转 向 等 这 些 动作 设计 的 , 穿 这 些 鞋 健 走 , 反 倒 使 脚 不 舒服 。</p> 
<p> 大 家 都 来 健 走 吧 !!!</p> 
<p> 祝 大 家 身体 健康 !!!</p> 
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<p> 总 结 说 来 : 健 走 , 目 前 慢跑 鞋 是 最 好 的 选择 。&gnbsp; &nbsp; &nbsp;<a href = " # top"> 回 
首部 </a></p> 
</div> 
<div style= "text - align:center"> <! -- 网 页 尾部 设 为 文本 居中 对 齐 --> 
<hr /> 
<p><a href = "mailto: webmaster @ walkerclub. net"> 和 我 联系 Email: webmaster @ 
walkerclub. net </a></p> 
</div> 
</body > 
</html > 


项 目 2.5 在 浏览 器 中 显示 效果 如 图 2. 19 所 示 。 
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PERS 
健 走 因 其 老少 此 宜 ， 锻 炼 时 对 身体 损伤 小 ， 对 预防 心血 管 病 及 诚 肥 都 是 益处 多 多 ， 正 在 成 为 一 种 “| 
不 亚 于 慢跑 的 时 尚 运动 。 健 走 毕 竟 ART EMEA. 是 一 种 有 一 定 强 度 的 健身 运动 ， 所 以 运动 装备 
(FREH) 是 需要 考虑 的 重要 方面 
对 于 健 走 运动 封 的 选择 可 谓 是 有 许多 不 同 的 说 法 ， 本 文 为 原创 ， 来 提出 自己 的 看 法 。 
Fe Ra aia ll 但 绝 大 多 数 相互 拷贝 粘贴 ， 总 结 出 来 也 就 如 下 三 种 是 典型 
1， 慢 跑鞋 是 一 个 较 好 的 选择 ， 
2 . BARTA, 应 该 选择 健步 鞋 ; 
选择 平底 、 软 底 鞋 ， 比 如 休闲 土 就 是 较 好 的 选择 。 


先 来 看 一 下 刍 走运 动 中 脚 的 运动 方式 ， 在 这 一 点 上 大 家 并 没有 异议 ， 脚 跟 先 落地 ， 然 后 迅速 滚动 到 
前 脚掌 ， 最 后 脚趾 用 力 踏 地 高 开 。 


图 2. 19  article2. html 页 面 效果 


项 目 2.6 activity] 的 HTML 文档 (activityl. htm). 


<html> 
< head > 
<title> 沃 克 俱 乐 部 - 俱乐部 活动 </title> 
</head > 
< body > 


<! 一 将 本 网 页 首部 书签 设 为 top, 本 网 页 其 他 部 分 可 以 用 “回首 部 ”来回 到 首部 -一 > 
<p><a href ="../index. html" name = "top"> 主 页 </a> &nbsp; &nbsp; &nbsp; 
<! -一 使 用 target 属性 ,使 articlel. html 和 article2. htm] 在 新 窗口 打开 --> 
<a href = "../introduction/articlel. html" target = "_blank"> 健 走 的 方法 </a > &nbsp; 
&nbsp; &nbsp; 
<a href =". ./introduction/article2. html" target = "blank"> 健 走 装 备 </a> 
</p> 
<hr /> 
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< h3 > 常规 活动 </h3 > 

<p><a href =" 井 tbhd"> 特 别 活动 </a></p> <! -- 设 定 网 页 内 跳 转 --> 

<div style= "text — indent: 1.5em"> 
<p> 常 规 活动 为 每 周一 .三 \ 五 .六 进行 。 具 体 时 间 安 排 及 路 线 安 排 如 下 : </p> 
<ul><!-- 设 定 非 排序 列表 unordered list --> 


<1i> 时 间 安 排 </1i> 

<ul> 
<1i> 每 周一 \ 三 、 五 </1i> 
<ul> 


<1i>6,7,8 H : 6:30pm—8:00pm </li> 
<li>3,4,5,9,10,11 月 : 6:00pm 一 7:30pm </li> 
<1i>12.1.2 月 : 5:30pm 一 7:00pm </li> 
</ul> 
<1i> 每 周 六 </1i> 
<ul> 
<1i> 全 年 : 3:00pm 一 5:00pm </li> 
</ul> 
</ul ><br /> 
<1i> 路 线 安排 </1i> 
<ul> 
<1i> 每 周一 ,三 \ 五 : 从 北三 环 与 渠 西 路 交叉 口 出 发 , 沿 东 风 渠 , 到 经 三 路 与 东风 路 交 
叉 口 折 回 ,到 北三 环 与 汇 东 路 交叉 口 结束 。 全 长 约 7 千 米 。</1i> 
<1i> 每 周 六 : 从 北三 环 与 渠 西 路 交叉 口 出 发 , 顺 北三 环 向 东 , 到 森林 公园 ,森林 公园 绕 
行 并 折 回 出 发 点 ,全 长 约 12 千 米 。</1i> 
</ul ><br /> 
<1i> 注 意 事项 </1i> 
<ul> 
<1i> 自 愿 参加 ,准时 出 发 。</1i> 
<1i> 请 穿 运动 鞋 ,携带 措 汗 的 毛巾 及 足 量 的 水 ,夏天 注意 处 阳 , 冬天 注意 防寒 。</1i> 
<1i> 如 遇 极 端 天 气 无 法 进行 活动 ,俱乐部 不 再 特别 通知 。</1i> 
</ul> 
</ul> 
</div> 
<h3 ><a name = "tbhd"> 特 别 活动 安排 : </a></h3 > 
<div style= "text ~ indent: 1.5em"> 


<ul> 
<1i> 特 别 活动 一 般 安排 在 清明 五 一 、 国 庆 等 假日 进行 ,时 间 为 一 天 ,路 线 为 市 区 近郊 , 健 
走路 程 为 25 至 30 千 米 。 具 体 的 时 间 安 排 及 路 线 请 会 员 注 意 网 站 通知 。&nbsp; &nbsp; &nbsp;< a href 
= "top"> 回 首部 </a></1i> 
</ul> 
</div> 
<div style = "text - align:center"> <! -- 网 页 尾部 设 为 文本 居中 对 齐 --> 
<hr /> 
<p><a href = "mailto: webmaster @ walkerclub. net"> 和 我 联系 Email: webmaster @ 
walkerclub. net </a></p> 
</div> 
</body > 
</html> 


项 目 2. 6 在 浏览 器 中 显示 效果 如 图 2. 20 所 示 。 
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gO [E] DAExample\Project\activity\activity1 html ~|4|x|[P Eee 


特别 活动 
常规 活动 为 每 周一 、 
。 时 间 安排 

° 每 


五 、 六 进行 。 具 体 时 间 安 排 及 路 线 安排 如 下 ， 


三 .五 
~ T7, 8A: 6:30pm 一 8:00pm 
4, 5, 9, 10, 11A: 6:00pm 一 7:30pm 
2. 1, 2A: 5:30pm 一 7:00pm 
LE: 3:00pm 一 5:00pm 
. RARI 
a, | 结束 。 全- 


出 发 点 ， 全 长 约 12 千 米 


oad 


图 2. 20 activityl. html 页 面 效果 


五 ， 从 北三 环 与 ree ay ee a 治 东风 渠 ， 到 经 三 路 与 东风 路 交叉 口 折 
o 每 周 六 ， 从 北三 环 与 aia 次 路 交 员 口 出 发 ， tenn, 到 森林 公园 ， 森 林 公园 绕 行 并 折 回 


提示 : 这 里 创建 的 4 个 网 页 ,主要 内 容 都 和 a 元 素 有 关 。 利 用 a 元 素 在 本 网 页 内 跳 转 ， 
或 者 链接 到 其 他 网 页 ,以 及 自动 打开 电子 邮件 客户 端 并 填写 好 收 件 人 邮箱 地 址 等 ,尤其 重要 
的 是 ,这 4 个 网 页 分 别 位 于 三 个 不 同 的 目录 (文件 夹 ), 使 用 a 元 素 链接 这 些 位 于 不 同 目录 的 


网 页 ,是 读者 需要 熟悉 掌握 的 技能 。 
(2.4 插入 图 片 


2.4.1 img 标签 
例 2.37 插入 图 片 。 


<html> 
<body> 
<img src= "smile.gif" alt= "Big smile face" /> 
</body> 
</html> 


例 2. 37 在 浏览 器 中 的 效果 如 图 2. 21 所 示 。 
使 用 二 img 之 标签 嵌入 一 个 图 像 到 HTML 文档 中 。 
img 标签 语法 : 


<img src= "file name of image" alt = "description text of image" /> 
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@ DAExample\Example2-37.html - Windows Inte... [o | & | #3 
Go- [E] DAExample\Examt + | ++] x || Saver 


ve G8 Æ DAExample\Example2-37.html 


vv 


图 2.21 img 元 素 


GIF JPEG 和 PNG 是 网 页 中 最 常见 的 图 片 格式 。 

当 一 个 网 页 被 打开 ,与 此 同时 浏览 器 会 从 服务 器 上 获得 图 片 并 且 将 图 片 显 示 在 网 页 中 。 
因此 ,确保 图 片 一 直 存 放 与 网 页 有 链接 的 地 方 。 否 则 ,网 页 的 访问 者 会 得 到 一 个 无 效 的 链接 
图 标 。 如 果 浏 览 器 不 能 找到 图 片 ,会 显示 无 效 的 链接 图 标 。 

要 显示 一 个 图 片 ,需要 使 用 sre 属性 。src 的 属性 值 是 在 网 页 上 显示 的 图 片 的 URL, 
因此 ,可 以 把 sre 看 作 是 一 个 链接 ,链接 到 要 使 用 的 图 片 资源 。 在 例 2. 37 中 ,图 片 “smile. 
gif” 和 文件 “ 例 2. 37. html" 在 相同 的 目录 中 。 然 而 ,如 果 图 片 文件 和 网 页 文件 在 不 同 的 目录 
中 ,就 需要 在 sro 属性 值 中 使 用 之 前 学 过 的 相对 路 径 , 参 见 项 目 2.7。 

如 果 浏 览 器 不 能 显示 图 片 或 者 是 言 人 使 用 浏览 器 访问 图 片 ,可 以 使 用 alt 属性 来 描述 
图 片 。 如 果 不 能 看 到 图 片 ,至 少 可 以 看 到 ( 听 到 )alt 中 的 文字 。 

提示 : sre fe alt 是 img 元 素 两 个 必须 的 属性 ,其 中 sre 就 像 是 一 个 链接 ,链接 到 要 使 用 
的 图 片 资源 上 ; alt 属性 是 为 了 给 那些 不 能 看 到 网 页 中 图 像 的 浏览 者 提供 文字 说 明 ,其 中 包 
括 那些 使 用 本 来 就 不 支持 图 像 显示 或 者 图 像 显示 被 关闭 的 浏览 器 的 用 户 ,视觉 障碍 的 用 户 
和 使 用 屏幕 阅读 器 的 用 户 ,替换 文字 是 用 来 替代 图 像 而 不 是 提供 额外 说 明文 字 的 。 


2.4.2 使 用 图 片 做 超 链 接 
img 元 素 能 够 做 成 超 链接 ,使 用 语法 如 下 : 


<a href ="url">< img src= "file name of image" /></a> 
例 2.38 将 图 片 做 成 超 链接 。 


<a href ="../index. html"><! -- click the image to go to homepage -一 > 
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<img src= "smile.gif" alt= "Go to Homepage" /><! -- show image smile. gif -- > 
</a> 


ER: 以 图 片 作 为 链接 实现 起 来 并 不 复杂 ,只 要 把 图 片 元 素 谈 入 到 超 链 接 元 素 内 即 可 。 


2.4.3 插入 图 片 综合 应 用 
项 目 2.7 在 articlel. html 中 增加 图 片 。 


<html> 
<head> 
<title> 沃 克 俱 乐 部 - 健 走 的 方法 </title> 
</head> 
<body> 


<! -- 将 本 网 页 首部 书签 设 为 top, 本 网 页 其 他 部 分 可 以 用 “回首 部 ”来回 到 首部 --> 
<p><a href ="../index. html" name = "top"> 主 页 </a> &nbsp; &nbsp; &nbsp; 
<! —- 使 用 target 属性 ,使 article2. html 在 新 窗口 打开 --> 
<a href = "article2. html" target = "_blank"> 健 走 装 备 </a> 
</p> 
<hr /> 
< h3 > 健 走 的 方法 </h3 > 
<p><a href = "+ jzyl"> 健 走 要 领 </a></p> <! -- 设 定 网 页 内 跳 转 --> 
<div style= "text ~ indent: 1.5em"> 
<! -- 设 定 图 片 居 右 对 齐 , 文 字 与 图 片上 下 左右 之 间 有 15 像素 的 空白 --> 
<img src="../images/walkingl. jpg" alt = " 健 走 有 利 身体 健康 " align = "right" hspace 
= "15" vspace = "15" /> 
<p> 健 走 即 俗称 的 快走 。 健 走 如 果 步 伐 适 当 ,其 速度 也 不 亚 于 慢跑 。 现 代 的 竞走 运动 中 ,一 
些 运 动员 能 达到 每 公里 3 分 30 秒 的 速度 ,一 个 优秀 的 竞走 运动 员 ,20 公里 只 需要 一 个 半 小 时 就 能 完 
成 。 这 个 速度 对 于 跑 友 来 说 ,都 已 经 相当 快 了 。 与 跑步 相 比 ,快走 通常 更 持久 , 而且, 如 上 所 述 也 能 达 
到 很 大 的 强度 ,足够 锻炼 心肺 功能 ,同时 还 能 发 展 腿 部 、 上 腰部 和 背部 肌肉 的 力量 。</p> 
<p> 在 我 国 古 代 的 军队 中 ,就 有 一 种 急行 军 比 赛 ,要 求 土 兵 快走 完成 比赛 , 而 不 是 跑 , 当时 的 
距离 是 90 公里 ,要 求 在 8 个 小 时 之 内 。 可 见 , 在 古代 就 有 用 快走 锻炼 身体 的 传统 。</p> 
<p> 健 走 比 慢 跑 好 的 地 方 也 有 几 点 ,一 是 不 容易 对 足 部 、 脚 躁 和 肤 盖 造成 伤害 , 二 是 没有 特 
殊 的 要 求 ,只 要 不 妨碍 迈步 ,普通 服装 也 可 以 。</p> 
<p> 另 外 , 健 走 和 跑步 一 样 ,形式 也 是 多 种 多 样 的 , 可 以 在 海边 走 ,也 可 以 在 山上 走 ,还 可 以 
在 室内 走 , 但 健 走 也 有 一 个 标准 , 那 就 是 时 速 不 能 低 于 6 公里 。</p> 
<p><a name = "jzyl"> 健 走 的 动作 要 领 如 下 : &nbsp; &nbsp; &nbsp; </a><a href = "+ top"> 
回首 部 </a></p> 
<ol><!-- 设 定 排序 列表 ordered list --> 
<1i> 身 体 前 倾 3 一 5 E, Hk, AY ARTE, BEN, WOW. </li> 
<1i> 两 臂 必须 配合 摆动 ,手臂 摆动 的 高 度 不 得 高 于 胸 。</1i> 
<1i> 脚 跟着 地 要 柔和 ,快速 滚动 到 全 脚掌 着 地 。</1i> 
<1i> 两 脚 落地 时 以 内 侧 为 准 踩 成 一 条 直线 。</1i> 
<1i> 不 要 出 现 双 脚 都 腾空 的 现象 。</1i> 
<1i> 健 走 要 求 走路 跨 大 步 .速度 敏捷 、 双 臂 摆 动 、 抬 头 挺 胸 , 比 慢跑 安全 ,也 比 散 步 有 效 。 
</li> 
</ol> 
</div> 
<div style = "text - align:center"> <! -- 网 页 尾部 设 为 文本 居中 对 齐 --> 
<hr /> 
<p><a href = "mailto: webmaster @ walkerclub. net"> 和 我 联系 Email: webmaster @ 
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walkerclub. net </a></p> 
</div> 
</body> 
</html > 


项 目 2.7 在 浏览 器 中 显示 效果 如 图 2. 22 所 示 。 


@ 这 俱乐部 - BEND - Windows Internet Explorer fe) i) 
O ~ [E orGeample\projectintroduction\articlethimi ~|4y] x || > Saree pe 


XHA RSE) SEV QERA IAM WMH 


ie eB TOUTS - 健 直 的 方法 | 


主页 。” RESE 


健 走 的 方法 
健 走 要 领 
健 走 即 俗称 的 快走 。 健 走 如 果 步 伐 
适当 ， 其 速度 也 不 亚 于 | ae 现代 的 
wierd 2 2 
运动 
AE Ne 0 eh 时 就 能 完成 


/ 公 cones, — 


背部 肌 | 内 的 力量 P 30 minutes 


of brisk walking 
在 我 国 古代 的 军队 中 ， 就 有 一 种 急 paren nesth 

TEKE, BRR RERNE 

PARR, SERENE, ER 

在 8 个 小 时 之 内 。 可 见 ， 在 古代 就 有 用 

快走 概 炼 身体 的 传统 


健 走 比 慢跑 好 的 地 方 也 有 几 点 ,一 
是 不 容易 对 足 部 、 脚 躁 和 肤 善 造成 伤 
害 ， 二 是 没有 特殊 的 要 求 ， 只 要 不 妨 
碍 迈步 ， 普 通 服装 也 可 以 。 


a 另外; 健 走 和 跑步 一 样 ， 形 式 也 是 多 种 多 样 的 ， 可 以 在 海边 走 ， 也 可 以 在 山上 走 ， 还 可 以 在 室内 


Jobbik Ads | anh nts E /\ mR i 


图 2.22 在 网 页 中 增加 图 片 


添加 图 片 以 后 ,网 页 更 加 生动 与 丰富 。 

提示 : img 元 素 在 HTML 版 本 中 ,还 有 诸如 width, height, hspace, vspace,align 等 属 
性 ,这 些 属性 用 来 设 定 图 片 大 小 、 图 片 与 周边 文字 空白 间距 及 对 齐 等 ,其 中 部 分 属性 在 项 
目 2.7 中 出 现 。 在 HTML 严格 要 求 中 ,这 些 功能 可 以 通过 CSS 方式 来 完成 。 


2.5 表格 


例 2.39 是 一 个 简单 的 HTML 表格 ,包含 两 行 和 两 列 。 
例 2.39 一 个 简单 表格 。 


<table border = "1"> 
<tr> 
<th> Name </th> 
< th> Date of Birth</th> 
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</tr> 
<tr> 
<td>Jeff </td> 
<td> 08/12/1988 </td> 
</tr> 
</table> 


表格 使 用 二 table 二 标签 定义 。 一 个 表格 被 分 为 若干 行 (使 用 二 tr 二 标签 ), 每 个 行 被 分 
为 若干 数据 单元 格 ( 使 用 二 td 二 标签 )。td 的 是 意思 是 table data, 是 一 个 数据 单元 格 的 内 
容 。 一 个 数据 单元 格 可 以 包括 text, images, lists, paragraphs, forms, horizontal rules, 
tables 等 。 

Table 标签 语法 : 


<table border = "pixels"> 
< caption > caption text </caption> 
<tr><th> header celll </th>< th> header cell2 </th>…</tr> 
<tr><td> celll </td><td> cell2 </td>--</tr> 


</table> 


border 属性 是 用 来 显示 带 有 边框 的 表格 。 
所 caption 之 标签 用 于 创建 表格 的 标题 。 
二 tr 二 标签 用 于 在 表格 中 插入 一 行 。 所 有 包含 在 其 中 的 二 td 二 和 二 th 二 标签 将 会 在 相 


同 的 表格 行 中 显示 。 
去 th> 标 签 用 于 在 表格 中 插入 一 个 表 头 单元 。 表 头 单元 中 的 内 容 通常 是 粗 体 并 且 在 单 
元 格 内 居中 。 


去 td> 属 性 用 于 在 表格 中 创建 数据 单元 格 。 
现在 使 用 以 上 标签 和 属性 改进 例 2. 39, 变 为 一 个 四 行 三 列 带 有 标题 的 表格 。 
例 2.40 带 标题 的 稍 复杂 表格 。 


<html> 
<body> 
<table border = "1"> 

< caption > Students Name List </caption > 

<tr> 
<th> Name </th> 
<th> Date of Birth</th> 
< th> Gender </th> 

</tr> 

<tr> 
<td> Jeff </td> 
<td> 08/26/1988 </td> 
<td> Male </td> 

</tr> 

<tr> 
<td> David </td> 
<td> 11/18/1987 </td> 
<td>Male </td> 
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</tr> 

<tr> 
< td> Rose </td> 
<td> 12/22/1988 </td> 
<td> Female </td> 

</tr> 

</table> 
</body > 
</html> 


图 2. 23 为 例 2. 40 在 浏览 器 中 的 显示 效果 。 


@ D:\Example\Example2-40,html -..[ 己 ‖ & || = | 
GOs [E] Damplein ~] 4] x |[P 


mn » 


ve WHEW DAExample\Example2-40.html 


Students Name List 
Name Date of Birth Gender 
Jeff 08/26/1988 Male 
David 11/18/1987 Male 
Rose 12/22/1988 Female 


图 2.23 在 网 页 中 插入 表格 


提示 : 从 例 2. 40 中 可 以 看 到 ,在 网 页 中 做 一 个 四 行 三 列 的 表格 ,要 写 很 多 代码 ,如 果 要 
做 一 个 有 很 多 数据 并 且 结 构 复 杂 的 大 表格 , 那 将 是 相当 大 的 代码 工作 量 ; 另外 ,一 table 二 标 
签 还 有 width,height,cellpacing,cellpadding 等 诸多 属性 来 设 定 表格 宽度 、 高 度 及 数据 在 表 
格 中 的 放置 方式 ,这 样 又 增加 了 表格 的 HTML 代码 书写 的 工作 量 。 事 实 上 ,表格 很 少 使 用 
纯 书写 代码 的 方式 来 完成 ,可 以 利用 网 页 制作 工具 如 Dreamweaver 来 快捷 地 画 出 表格 ,或 
者 用 动态 网 页 设计 工具 ASP. net 对 提取 出 的 数据 根据 事先 设计 好 的 表格 自动 进行 显示 。 

值得 注意 的 是 ,由 于 单元 格 内 可 以 放置 图 片 、 文 字 、 超 链 等 元 素 , 所 以 表格 在 网 页 中 常用 
来 建立 网 页 的 框架 ,使 整个 页 面 布局 分 布 更 规则 ,并 使 条 目 更 清晰 。 


2.6 HTML5 


2.6.1 基本 HTML5 文件 


为 了 对 HTML5 有 一 个 基本 的 认识 ,首先 来 看 一 个 最 基本 的 HTML5 文件 。 
例 2.41 基本 的 HTMLS 文件 。 


<! DOCTYPE html > 
<html > 
<head></head> 
<body> 
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<video src = "movie. mp4" width= "320" height = "240" controls> 
Your browser does not support the video tag. 
</video> 

</body> 

</html > 


在 浏览 器 上 运行 结果 如 图 2. 24 所 示 ,播放 一 个 视频 文件 。 


图 2.24 一 个 最 基本 的 HTML5 文件 


如 果 读 者 曾经 使 用 HTML4( 或 者 XHTML) 实 现 视频 播放 工作 ,对 例 2. 41 所 完成 的 工 
作 一 定 有 极为 深刻 的 印象 , 短 短 的 几 行 代码 ,就 完成 了 视频 的 播放 。 这 就 是 HTML5 对 多 
媒体 文件 播放 的 有 力 支持 ,当然 ,这 只 是 HTML5 众多 强大 而 新 颖 的 特性 之 一 。 

HTML5 对 视频 和 音频 的 支持 将 在 稍 后 讲 到 ,这 里 首先 讲 一 下 HTML5 文件 的 最 基本 
的 架构 特征 。 

仔细 看 一 下 例 2. 41 ,这 个 HTML5 文件 与 以 往 的 HTML4( 或 XHTML1) 不 同 之 处 就 
是 它 的 第 一 行 。 

DOCTYPE 


第 一 行 的 ! DOCTYPE 是 文档 类 型 声明 (Document Type Declaration), 它 被 用 来 告诉 
浏览 器 ,应 该 使 用 什么 样 的 文档 类 型 定义 来 解析 该 文档 (或 文件 )。 对 HTML 文件 而 言 , 它 
需要 说 明 HTML 的 版 本 .!DOCTYPE 要 出 现在 HTML 文件 (无 论 什么 版 本 ) 的 第 一 行 ,在 
<html> TZM. 

HTML5 问世 之 前 ,文档 类 型 声明 代码 元 长 而 难 记 , 比如, 对 XHTML 1. 0 
Transitional, 其 文档 类 型 声明 代码 如 下 : 


<! DOCTYPE html PUBLIC " - //W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www. w3. org/TR/xhtml1/DTD/xhtml1 - transitional. dtd"> 


对 HTML5 来 说 , 极 大 地 简化 ,是 如 下 的 代码 : 
<! DOCTYPE html > 

或 者 小 写 格式 也 是 正确 的 : 
<!doctype html > 


HTML5 的 写法 简单 而 直观 。 
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2.6.2 定义 页 面 结构 布局 


HTML5 新 增加 的 标签 中 , 引 人 注 目的 部 分 ,包括 引入 常用 的 页 面 布局 元 素 。 现 在 ,来 
详细 了 解 在 页 面 布局 中 ,HTML5 都 添加 了 哪些 元 素 。 


1. header 元 素 


用 户 访问 网 站 ,第 一 眼看 到 的 ,就 是 位 于 最 上 面 的 header 元 素 。header 元 素 通常 包括 
介绍 性 的 信息 以 及 网 站 及 网 页 导航 信息 。 在 实际 设计 中 ,虽然 header 元 素 经 常 放 在 页 面 的 
顶部 ,但 并 不 意味 着 header 元 素 不 能 放 在 页 面 的 其 他 位 置 。 根 据 文章 的 需要 、 帖 子 的 需要 ， 
header 元 素 也 可 以 放 在 左面 .右面 ,甚至 是 内 容 的 下 面 。 


2. section 元 素 


section 元 素 是 按 主 题 分 组 的 内 容 ,通常 带 有 标题 。 比 如 ,作为 教科 书 , 本 小 节 就 是 一 个 
section ,专门 用 于 讲解 页 面 结构 布局 这 个 主题 的 内 容 , 其 section 标题 是 “2. 6. 2 定义 页 面 结 
构 布 局 ”。 

section 元 素 常用 于 以 下 的 页 面 设计 : 

。 选项 卡 界面 中 的 每 一 个 的 选项 卡 。 

。“ 服 务 条 款 ” 页 面 中 的 每 一 个 部 分 。 

。 在 线 新 闻 网 站 的 新 闻 分 类 ,如 文章 可 以 分 类 为 体育 新 闻 section, 国 际 新 闻 section, 

及 经 济 新 闻 section 等 。 


3. article 元 素 


顾名思义 ,一 个 article 即 是 一 篇 描述 完整 的 独立 内 容 。 对 于 article 元 素 的 使 用 场合 ， 
有 如 下 建议 : 

。 论坛 帖子 。 

。 一 条 博客 。 

。 用 户 提交 的 评论 。 


4. nav 元 素 


nav 元 素 即 是 其 英文 词汇 navigation( 导 航 ) 所 表达 的 含义 : 一 组 导航 链接 。 可 以 确定 
地 说 ,每 个 网 站 项 目 中 都 有 nav 元 素 出 现 。 


nav 元 素 可 以 在 页 面 中 出 现 多 次 。 比 如 ,主导 航 栏 和 页 面 内 导航 都 可 以 放 到 nav 元 
素 内 。 
5. aside 元 素 


本 元 素 是 与 页 面 内 容 分 离 而 又 附属 于 页 面 的 部 分 。aside 元 素 可 用 于 以 下 设计 : 
”特定 独立 的 内 容 (仍然 附属 于 文章 或 节 ) 。 
。 整个 网 站 的 侧 边栏 内 容 。 


第 2 章 HTML 


实际 应 用 中 , aside 元 素 可 用 在 侧 边栏 .广告 区 等 设计 中 。 需 要 说 明 的 是 aside 元 素 并 
不 是 只 能 放 在 “边栏 位 置 , 它 也 可 以 放 在 其 他 位 置 。 


6. footer 元 素 


KWF Word 中 的 页 脚 ,footer 元 素 则 是 Web 页 面 中 的 页 脚 。 当 然 ,设计 实践 中 ， 
footer 元 素 在 一 个 页 面 中 可 以 出 现 多 次 ,作为 文章 的 脚 ,作为 节 的 脚 ,作为 页 面 的 脚 。 

Footer 元 素 通 常 包 含 版 权 信息 .相关 链接 、 作 者 (开发 者 ) 信 息 等 适合 放 在 整体 内 容 末 
尾部 分 的 信息 。 与 header aside 元 素 类 似 ,虽然 footer 常常 放 在 整体 部 分 脚 部 ,但 设计 者 也 
可 以 放 在 其 他 认为 合适 的 位 置 。 


7. 构造 页 面 布局 


HTML5 新 增 的 页 面 布局 元 素 介绍 完毕 。 现 在 利用 这 些 元 素 构造 一 个 页 面 。 

Web 页 面 首部 有 一 个 header 元 素 . 包 括 Logo、 标 题 和 宣传 词 (如 品牌 标语 ) ,该 header 
元 素 中 还 包含 nav TOR ,整个 网 站 的 链接 在 该 元 素 中 定义 。 

首部 下 面 ,网 站 主要 内 容 分 为 两 列 , 其 中 左 列 是 边栏 , 右 列 是 文章 内 容 。 

页 面 脚 部 是 footer 元 素 ,该 布局 元 素 包 含 版 权 \、 作 者 、 网 站 备案 信息 等 。 

参见 例 2. 42, 使 用 HTML5 布局 元 素 完成 了 一 个 基本 的 网 页 布局 设计 。 

例 2.42 使 用 HTML5 布局 元 素 设计 网 页 。 


<!DOCTYPE html > 
<html> 
<head></head> 
<body> 
<header> 
<nav></nav> 
</header > 


<div id = "maincontent"> 
<div id = "sidebar"> 


<aside></aside> 


</div> 
<div id = "article"> 
<article></article> 


</div> 
</div> 


< footer > 
< section id = "copyright"> 
< section ></section> 
</section> 
< section id = "author"> 
< section ></section> 
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</section> 
</footer > 


</body> 

</html> 

例 2. 42 完成 的 布局 图 如 图 2. 25 所 示 。 

在 例 2.42 中 ,类 似 id 二 “maincontent” 这 样 的 代码 将 在 第 3 章 CSS 中 讲 到 ; 同时 ,由 
于 本 例 中 选择 符 id 都 没有 进行 具体 的 CSS 定义 ,因此 ,图 2.25 只 是 一 个 概念 图 ,具体 实现 ， 
需要 CSS 的 配合 才 可 以 完成 。 


| <header> 
H <article> 
A 
Bo} 
$ <article> 
<footer> 


K 2.25 使 用 HTML5 布局 元 素 设计 网 页 


说 明 : HTML5 中 页 面 架 构 布 局 的 元 素 , 其 核心 思想 是 用 于 替代 传统 HTML 布局 中 使 
用 的 DIV 元 素 。 在 学 习 第 3 章 CSS 时 ,二 div id = “header” > </div> 4 4, T vA H 
于 header 二 一 /header 二 替代 ,以 保证 更 简洁 更 规范 的 页 面 布 局 写法 。 

当然 ,对 于 已 经 习惯 于 使 用 DIV 和 CSS 自主 进行 页 面 布 局 设计 的 人 来 说 , 转 而 使 用 
HTML5 -Aiti rede, <div> 45 <section> Att 4 BH? 44 a REA <div>, 
什么 时 候 使 用 一 section 之? 在 这 里 给 出 的 建议 是 : 如 果 不 是 非常 确定 使 用 某 一 个 特定 的 
HTML5 布局 元 素 , 仍 使 用 王 div 二 的 方式 完成 页 面 布局 设计 。 


2.6.3 视频 和 音频 播放 


HTML5 出 现 之 前 ,Web 页 面 没有 播放 视频 和 音频 的 标准 , 那 时 的 视频 及 音频 是 通过 
插件 (如 Flash) 进 行 播放 ,而 且 , 不 同 的 浏览 器 支持 的 插件 也 各 不 相同 。 

Adobe 公司 的 插件 Flash 播放 器 由 Adobe 独家 控制 ,不 对 Web 开发 社区 开放 。 
HTML5 引入 视频 和 音频 播放 元 素 .使 多 媒体 播放 成 为 Web 页 面 无 颖 结合 的 一 部 分 。 使 用 
HTML5 ,用 户 不 必 下 载 第 三 方 的 多 媒体 播放 软件 ,就 可 以 直接 播放 多 媒体 内 容 。 


1. 视频 播放 


参见 前 述 的 例 2. 41, 即 HTML5 的 第 一 个 例子 ,其 中 video 元 素 展 示 了 播放 视频 文件 的 
功能 。 现 在 详细 学 习 video 元 素 的 使 用 方法 。 
参见 例 2. 41 ,使 用 video 元 素 时 ,建议 把 width 和 height 两 个 属性 明确 赋值 。 当 为 视频 
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设置 宽度 和 调试 值 时 ,网 页 加 载 时 ,就 会 为 视频 保留 这 个 空间 。 如 果 没 有 事先 赋值 ,浏览 器 
不 知道 视频 的 宽 和 高 ,就 无 法 预 留 空间 , 载 人 视频 时 ,再 把 视频 需要 的 空间 挤 出 来 ,这 样 会 改 
变 已 经 加 载 的 网 页 布局 ,影响 用 户 体验 。 

video 元 素 中 的 controls 属性 加 入 播放 控件 ,如 播放 暂停. 音量 调节 等 。 

video 元 素 内 的 文本 内 容 是 为 不 支持 video 元 素 的 浏览 器 准备 的 ,如 果 浏 览 器 不 支持 
video 元 素 , 这 些 文本 内 容 就 会 显示 出 来 。 

video 元 素 语 法 和 img 元 素 语法 很 类 似 , 需 要 指定 源 文 件 的 位 置 (src) 及 文件 所 占 空 间 
大 小 (width,height) 等 属性 。 例 2. 41 中 的 核心 代码 如 下 (有 适当 删 减 ); 


<video src = "movie.mp4" width = "320" height = "240"></video> 


其 中 sre 指定 视频 源 文件 位 置 ,width 和 height 指定 视频 播放 的 宽 与 高 。 
video 语法 如 下 : 


<video src = "url" width = "pixels" height = "pixels" attributes > text </video> 


属性 说 明 : 

src: 必 需 。source 英文 缩写 ,指定 视频 源 文件 位 置 。 建 议 使 用 相对 路 径 。 

width: 可 选 。 视 频 宽度 ,以 像素 值 表示 。 

height: 可 选 。 视 频 高 度 , 以 像素 值 表示 。 

虽然 可 以 设置 视频 的 宽 和 高 ,但 视频 本 身 的 比例 不 会 受 影响 。 比 如 : 在 上 述 例子 ， 
例 2. 41 中 ,如 果 视 频 实际 是 320X200( 宽 X 高 ), 标 签 中 设置 的 是 320X 240 ,那么 视频 将 保 
持 高 度 为 200 像素 不 变 , 在 240 像素 的 空间 中 垂直 居中 。 显 而 易 见 ,这 样 做 是 为 了 保持 视频 
原本 比例 ,不 被 video 属性 设置 的 宽 和 高 扭曲 变形 。 

controls: 可 选 。 该 值 为 布尔 类 型 ,直接 添加 属性 名 称 ,不 设 定 值 。 有 这 个 属性 时 ,视频 
界面 显示 播放 功能 按钮 ,如 播放 ,暂停 .停止 ,快速 定位 .音量 调节 等 ,如 图 2. 24 所 示 。 实 际 
代码 如 下 ( 选 自 例 2. 41) : 


< video src = "movie.mp4" width = "320" height = "240" controls> 
</video > 


autoplay: 可 选 。 布 尔 类 型 。 有 此 属性 时 ,含有 页 面 视频 的 页 面 加 载 后 ,视频 自动 播放 。 
实际 代码 如 下 : 


<video src = "movie.mp4" width = "320" height = "240" controls autoplay> 
</video> 


loop: 可 选 。 布 尔 类 型 。 有 此 属性 时 ,视频 将 循环 播放 。 实 际 代码 如 下 : 


<video src = "movie.mp4" width = "320" height = "240" controls autoplay loop> 
</video> 
对 多 种 视频 格式 的 支持 。 


如 果 所 有 浏览 器 能 够 统一 支持 一 种 类 型 的 视频 格式 ,当然 是 很 好 的 解决 办 法 。 事 实 上 ， 
问题 没有 这 么 简单 。 目 前 ,主流 浏览 器 支持 3 种 视频 格式 : MP4、WebM 和 Ogg。 表 2. 2 
列 出 了 主流 浏览 器 对 这 3 种 视频 格式 的 支持 情况 。 
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表 2.2 支持 HTMLS 视频 格式 的 浏览 器 版 本 


Browser MP4 WebM Ogg 
IE 9+ 一 一 
Chrome 3 十 6 十 3 十 
Firefox 3.5 十 4 十 3.57 


为 了 在 video 元 素 中 包含 多 种 格式 的 视频 文件 ,在 video TER PURE TH Ib—*F TCH. 
名 为 source 元 素 , 该 元 素 用 于 指定 视频 源 文件 ,source 元 素 的 功能 就 相当 于 video 元 素 中 的 
sre 属性 , 当 使 用 source 指定 多 个 格式 的 视频 源 文件 时 , video 元 素 中 的 sre 属性 就 不 再 
使 用 。 

考虑 到 当前 的 主流 浏览 器 对 视频 格式 的 支持 ,多 个 格式 视频 文件 的 支持 代码 如 下 。 

例 2.43 同时 指定 多 个 格式 的 视频 文件 。 


<!DOCTYPE html > 
<html> 
<body> 
<video width= "320" height = "240" controls> 
< source src = "movie. mp4" type = "video/mp4"> 
< source src = "movie. webm" type = "video/webm"> 
< source src = "movie. ogg" type = "video/ogg"> 
Your browser does not support the video tag. 
</video > 
</body > 
</html> 


fj 2.43 中 ,movie. mp4 .movie. webm, movie. ogg 这 三 个 文件 具有 相同 的 视频 内 容 , 只 
是 格式 不 同 , 这 样 可 以 保证 该 网 页 在 主流 浏览 器 中 都 能 够 被 正常 播放 。 这 也 说 明 , HTML5 
标准 化 还 有 很 长 的 路 要 走 。 
同样 ,在 例 2. 43 中 ,每 个 source 元 素 中 都 必须 包含 type 的 属性 ,这 个 属性 指定 MIME 
类 型 ,用 于 告诉 浏览 器 用 什么 样 的 MIME 类 型 解析 源 文件 。3 种 视频 源 文件 对 应 的 MIME 
类 型 如 表 2. 3 所 示 。 
表 2.3 视频 格式 的 MIME 类 型 


视频 格式 MIME 类 型 
MP4 video/mp4 
WebM video/webm 
Ogg video/ogg 
2. 音频 播放 


除了 视频 播放 的 可 视 部 分 外 ,上 小 节 讨 论 的 关于 视频 播放 的 相关 内 容 大 都 适合 于 音频 
播放 。 因 此 ,音频 播放 内 容 可 以 类 比 视频 播放 内 容 学 习 与 掌握 。 

类 似 于 视频 播放 video 元 素 , 其 中 的 sre, controls, autoplay, loop 属性 都 适用 于 音频 播 
放 audio 元 素 。audio 元 素 在 使 用 controls 属性 时 ,播放 器 操作 界面 才能 够 显示 出 来 (与 
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video 类 似 ) 。 当 然 ,播放 器 操作 界面 也 可 以 通过 JS 脚本 的 方式 访问 ,需要 时 显示 ,不 需要 时 
隐藏 audio TERA source 元 素 , 支 持 多 种 音频 格式 。 浏 览 器 支持 的 音频 格式 如 表 2.4 所 
示 ,音频 格式 对 应 的 MIME 类 型 如 表 2.5 所 示 。 


表 2.4 支持 HTMLS 音频 播放 的 浏览 器 版 本 


浏 览 器 MP3 Wav Ogg 
IE 9+ 9+ = 
Chrome sF 6+ 3+ 
Firefox = 3.5+ 3.5 十 


表 2.5 音频 格式 对 应 的 MIME 类 型 


Video Format MIME-type 
MP3 audio/mpeg 
Wav audio/ wav 
Ogg audio/ogg 


在 audio JGZ "P, He HE AY HI E, EW AS CHF audio 元 素 的 浏览 器 显示 使 用 。 如 
例 2.44, 使 用 1E9( 支 持 audio 元 素 ) 浏 览 时 ,可 以 正常 播放 音频 ,使 用 TES 及 以 下 版 本 浏览 
时 ,无 法 播放 音频 ,可 以 看 到 “Your browser does not support the audio element. "文本 显示 
在 浏览 器 中 。 
例 2.44 音频 播放 。 
<! DOCTYPE html > 
<html> 
< body> 
< audio controls > 
< source src = "music. wav" type = "audio/wav"> 
< source src = "music. mp3" type = "audio/mpeg"> 
Your browser does not support the audio element. 
</audio> 
</body > 
</html> 
说 明 : HTML5 在 无 颖 化 多 媒体 播放 方面 迈 出 了 决定 性 的 一 步 。 网 站 开发 设计 人 员 可 
以 不 需要 第 三 方 插件 完成 多 媒体 的 播放 工作 。 在 实际 学 习 应 用 中 也 要 看 到 ,由 于 不 同 浏览 
器 对 多 媒体 格式 支持 的 不 同 ,不 是 一 行 代码 可 以 应 用 于 所 有 的 浏览 器 上 ,因此 ,在 设计 中 , 需 
要 考虑 到 所 有 的 主流 浏览 器 ,要 写 多 行 代码 ,同样 ,要 把 同一 个 多 媒体 文件 转换 为 多 种 格式 ， 
才 可 以 保证 多 媒体 文件 在 主要 的 浏览 器 都 能 够 正常 播放 。 


wP 
HTML5 是 在 HTML4 基础 上 ,为 了 更 好 的 可 读 性 ,直接 支持 多 媒体 效果 ,并 可 以 运行 


在 更 多 的 设备 之 上 。HTML4 的 标签 仍然 可 以 使 用 ,在 组 织 网 页 架构 时 ,注意 利用 HTML5 
标签 。 
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HTML 是 网 页 设计 的 基础 ,虽然 现在 有 许多 网 页 设计 工具 可 以 自动 生成 HTML 代码 ， 
但 对 HTML 深入 的 掌握 ,可 以 直接 使 用 代码 方式 更 细节 化 地 设计 调整 网 页 。 


习题 


1. 下 列 哪 一 行 代码 是 符合 HTML 规范 的 ? 
A. <p>A<b> short<i></b> paragraph. <</i></p> 
B. <p>A<b><i> short</i></b> paragraph. </p> 
C. <p>A<b> short<i></b> paragraph. </p> 
D. <p>A<b> short</b><i> paragraph. </i> 
2. 以 下 哪个 程序 不 能 用 于 编辑 HTML 文档 ? 
A. 计算 器 B. 记事 本 C. 写字 板 D. Word 
. HTML 所 有 元 素 都 需要 关闭 么 ? 
. 在 HTML 中 ,过 .br / 之 和 志 br> 哪 一 个 是 正确 的 换行 标签 ? 
5. 如 何在 新 窗口 打开 链接 ? 
A. <a href=”#” new> 
B. <a href=” +” target="_blank” > 
C. <a href=”#” target=”_self? ></a> 
D. <a href=” #” target=”_blank” ></a> 
6. 怎样 可 以 由 页 面 底部 快速 跳 转 到 页 面 项 部 ? 
7. 在 HTML5 中 引入 了 专门 用 于 播放 视频 文件 的 video 元 素 。 如 果 在 一 个 网 页 设计 
中 ,使 用 video 元 素 的 sre 属性 成 功 调用 源 文件 myvideo. ogg ,并 使 用 Chrome 浏览 器 测试 播 
放 成 功 ,那么 ,这 个 网 页 上 的 视频 文件 能 够 在 所 有 主流 浏览 器 上 都 播放 成 功 么 ? 
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6.1 CSS 简介 


HTML 不 包含 格式 化 文本 的 标签 。HTML 的 目的 是 要 定义 一 个 文本 的 内 容 , 比 如 ， 


<hl > This is a heading </hl > 

<p>This is a paragraph. </p> 

4 <font > br Fil Bil E JR ERRIME HTML 3. 2 格式 , 它 成 为 了 Web FEAR AYE 
梦 。 把 字体 和 颜色 信息 添加 到 每 个 网 页 中 ,使 设计 大 型 网 站 变 成 一 个 漫长 而 昂贵 的 过 程 。 

为 了 解决 这 一 问题 ,万维网 联盟 (World Wide Web Consortium, W3C) fi] EŒ SARE SK 
# (Cascading Style Sheets,CSS) 。 在 HTML 1. 0 中 ,可 以 从 HTML 文档 删除 所 有 格式 , 储 
存在 一 个 单独 的 CSS 文件 中 。 现 在 所 有 的 浏览 器 都 支持 CSS。 

内 容 与 表现 的 分 离 是 HTML 的 基本 设计 原则 之 一 。 把 展示 与 内 容 分 离 可 以 把 相同 的 
内 容 发 给 不 同 的 客户 端 浏览 器 ,让 这 些 客户 端 决定 如 何 用 最 合适 的 方式 表现 出 来 。 毕 况 , 一 
个 手机 浏览 器 没有 与 火狐 等 桌面 浏览 器 相同 的 功能 。 

因此 ,HTML 文件 应 着 重 于 文档 内 容 是 什么 ,而 不 是 显示 出 什么 样子 。HTML 元 素 如 
何 显示 由 CSS 来 进行 定义 。 目前 ,HTML 十 CSS( 或 称 为 DIV 十 CSS) 已 经 成 为 Web 的 一 
个 标准 的 设计 方法 。 

CSS 是 网 页 设计 界 的 一 场 革命 。CSS 的 具体 好 处 包括 : 

。 用 一 个 单一 的 样式 表 控 制 多 个 文档 的 布局 。 

。 更 精确 的 布局 控制 。 

。 对 不 同 媒体 类 型 (屏幕 .打印 等 ) 采 用 不 同 布局 。 

。 众多 先进 和 尖端 的 技术 。 

提示 : HTML 最 初 只 是 为 了 显示 网 页 的 内 容 , 不 是 用 来 美化 网 页 的 布局 。 但 在 20 世 
纪 末 的 浏览 器 大 战 中 ,浏览 器 开发 商 为 了 使 自己 的 浏览 器 显示 出 更 美观 的 网 页 ,纷纷 在 
HTML 中 加 入 可 以 美化 网 页 显示 的 属性 ,这 使 得 网 页 设计 人 员 不 得 不 设计 对 应 菜 一 特定 浏 
览 器 的 网 页 ,导致 一 个 网 站 会 有 针对 不 同 浏览 器 的 不 同 版 本 。 为 解决 这 一 问题 ,W3C 推出 
了 CSS ,并 做 出 明确 分 工 : HTML 负责 内 容 的 构建 ,CSS 负责 网 页 的 布局 .美化 与 展示 。 现 
在 所 有 的 主流 浏览 器 都 支持 CSS, 也 形成 了 当前 网 页 设计 的 标准 化 方法 : HTML + CSS 
(DIV + CSS). 
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nf 
6.2 将 CSS 插入 网 页 


插入 一 个 样式 表 有 三 种 方式 : 
。 行 内 样式 。 

。 内 部 样式 表 。 

。 外 部 样式 表 。 


3.2.1 行内 样式 
行内 样式 的 语法 ， 


<tag style = "property: value; property: value; …"> 
tag: HTML 标签 的 名 称 。 
style: 样式 属性 ,style 参数 可 以 应 用 于 除了 basefont,param 和 script KHER <body> 


内 的 元 素 。 样 式 属性 可 以 包含 任何 CSS 属性 。 
冒号 *: "是 用 来 分 隔 属 性 和 值 ,分 号 "; "是 用 来 分 割 属性 的 定义 。 
例 3.1 行内 样式 的 使 用 。 


<html> 
< head > 
<title> Inline Style</title> 


</head > 


< body> 
<p style = "font :30pt; color :red"> This inline style specifies the paragraph’ s font size as 


30pt and font color as red. </p> 
<p>This paragraph has no inline style. </p> 
</body> 

</html> 

例 3.1 在 浏览 器 上 的 显示 效果 如 图 3. 1 所 示 。 

由 于 行内 样式 将 内 容 与 展示 混合 在 一 起 , 它 失 去 了 引入 样式 表 的 优势 ,尽量 少 用 这 种 

提示 : 行内 样式 可 以 单独 控制 一 个 标签 的 样式 。 因 为 行内 样式 把 网 页 的 格式 化 与 需要 
显示 的 内 容 ( 即 HTML 标签 ) 混 在 一 起 ,实际 上 违背 了 最 初 设计 CSS 的 初衷 ,也 失去 了 CSS 
特有 的 优势 ,所 以 这 种 方法 应 尽量 少 用 。 

第 2 章 的 Example 2. 25 在 三 div 标签 中 使 用 了 这 种 行内 样式 的 方法 ,当时 看 来 还 属 
于 比较 先进 的 方法 , 当 学 完 本 章 后 ,就 会 发 现 有 更 简捷 方法 来 完成 同样 的 工作 。 


3.2.2 内 部 样式 表 


单一 的 文件 要 具有 独特 的 风格 应 使 用 内 部 样式 表 , 内 部 样式 通过 使 用 二 style 二 标签 ， 
在 HTML 页 面 的 二 head 之 部 分 中 定义 ,如 下 所 示 。 
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@ inline Style - Windows Internet Explorer [EE 
GO > [E Damplein -|[5|x||P See p~ 


文件 (月 SRE 


Ve = |Æ Inline Style 


This inline style 
specifies the 
paragraph’ s font 
size as 30pt and 
font color as red. 


This paragraph has no inline style. 


内 部 样式 的 语法 : 
<style type = "text/css"> 
<! -- 


Selectorl{ property: value; property: value; … } 
selector2{ property: value; property: value; … } 


--> 
</style> 


style: 在 此 标签 内 定义 样式 。 

type: 根据 CSS 语法 定义 指定 样式 (type = "text/css"). 

<tr>, HTML 的 注释 标记 ,用 来 使 旧版 的 浏览 器 可 以 使 用 ,因为 它们 可 能 不 知 
道 CSS。 

selector: 通常 是 HTML 元 素 /标签 来 定义 (将 在 本 章 稍 后 部 分 学 习 )。 

属性 和 值 之 间 用 冒号 ,并 用 大 括号 包围 。 

例 3.2 使 用 内 部 样式 表 。 


<html> 
<head> 
<style type = "text/css"> 
> 
hl. mylayout {border - width: 1; border: solid; text ~ align: center;color:red} 
--> 
</style> 
</head> 
< body > 
<hl class = "mylayout"> This heading uses the style.</h1 > 
<hl > This heading doesn’t use the style.</hl > 
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</body> 
</html > 


例 3.2 在 浏览 器 上 的 显示 效果 如 图 3. 2 所 示 。 


@ DiExample\Example3-2.html - Windows Internet Explorer >o ea 
GO [E drerxample\txample3-2html ~|*s|x|[P Be pr| 


ip WHE | @D:\Example\Example3-2.html 


This heading uses the style. 


This heading doesn’ t use the style. 


图 3.2 内 部 样式 表 


内 部 样式 表 的 优点 : 

。 内 部 样式 只 影响 它们 所 在 的 页 面 。 如 果 在 一 个 大 型 网 站 工作 ,需要 测试 样式 ,在 将 
网 页 加 载 到 整个 网 站 之 前 ,内 部 样式 表 是 一 个 很 有 用 的 工具 。 内 部 样式 表 允 许 测试 
当前 文档 的 样式 ,而 不 会 破坏 整体 网 站 的 其 他 页 面 。 

。 内 部 样式 表 可 以 使 用 类 和 ID。 和 行内 样式 不 同 , 内 部 样式 表 仍 然 可 以 利用 类 ID 和 

其 他 元 素 关 系 。 

内 部 样式 表 不 要 求 上 传 多 个 文件 。 当 使 用 那些 只 有 一 个 HTML 文档 去 编辑 内 容 ， 

比如 电子 邮件 或 小 型 应 用 系统 时 , 它 是 非常 有 用 的 。 将 文档 的 样式 与 文档 本 身 放 在 

一 起 ,就 知道 是 什么 样式 在 影响 文件 。 

。 内 部 样式 具有 比 外 部 样式 表 更 高 的 优先 级 。 这 取决 于 外 部 样式 的 加 载 顺 序 。Web 
页 面 设 计 人 员 可 以 将 内 部 样式 放置 在 文件 头 部 的 合适 位 置 。 如 果 内 部 样式 被 放置 
在 连接 到 外 部 的 样式 表 的 后 面 ,内 部 样式 在 层 倒 上 有 更 高 的 优先 级 。 

内 部 样式 表 的 缺点 : 

。 只 能 影响 它们 所 在 的 网 页 。 如 果 几 个 文档 要 使 用 相同 的 样式 ,需要 在 每 个 页 面 上 重 
复 放 入 这 些 内 部 样式 (或 连接 到 一 个 外 部 样式 表 上 )。 

。 内 部 样式 表 的 加 载 时 间 长 。 浏 览 器 每 次 加 载 页 面 时 ,页 面 内 的 内 部 样式 都 需要 加 载 
和 解析 。 而 外 部 样式 表 由 浏览 器 缓存 ,这 样 , 当 第 一 次 加 载 外 部 样式 表 之 后 ,页 面 加 
载 不 再 需要 加 载 样式 表 , 极 大 节省 了 时 间 。 

提示 : 关于 选择 符 (selector) 及 其 使 用 将 在 3. 3 节 进 行 详细 的 讲解 。 这 里 需要 更 多 关 

注 的 是 内 部 样式 所 在 位 置 (head 元 素 内 ) 和 HTML 的 注释 标签 (二 1- -…- - 盖 ) 的 使 用 。 注 

释 标 签 是 为 了 避免 旧版 本 的 浏览 器 不 支持 CSS, 所 以 特意 把 style 元 素 内 容 以 注释 形式 表 

示 , 这 样 对 于 不 支持 CSS 的 浏览 器 ,会 自动 忽略 此 段 内 容 。 

本 小 节 讨 论 了 内 部 样式 的 优点 和 缺点 ,由 于 读者 尚未 进行 外 部 样式 的 学 习 , 可 能 对 此 理 

解 并 不 深刻 。 学 完 外 部 样式 及 层 垣 (cascading) 概 念 后 ,本 小 节 关 于 内 部 样式 优 缺点 的 讨论 
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会 完全 理解 。 
3.2.3 ”外 部 样式 表 


当 样 式 应 用 于 许多 页 面 时 ,外 部 样式 表 是 不 错 的 选择 。 使 用 外 部 的 样式 表 , 整 个 Web 
站 点 的 外 观 可 以 通过 改变 一 个 . css 文件 完成 。 

外 部 样式 表 创 建 语 法 与 内 部 样式 表 相似 。 也 许 更 简单 一 些 , 只 需要 选择 符 和 声明 。 外 
部 样式 表 语 法 是 : 


selectorl{ property: value; property: value; … } 
selector2{ property: value; property: value; … } 


将 这 些 代码 保存 到 一 个 扩展 名 为 . css 文本 文件 中 。 
例如 ,使 用 记事 本 创建 一 个 文件 名 为 layout. css, 键 入 例 3. 3 的 内 容 到 这 个 文件 中 。 
例 3.3 创建 一 个 外 部 样式 表 文 件 layout. ess. 


hl, mylayout {border - width: 1; border: solid ; text-align: center; color:red} 
外 部 样式 表 文 件 被 创建 好 以 后 ,将 其 链接 到 网 页 上 ,有 两 种 方法 来 实现 这 种 链接 。 
1. A 


使 用 HTML <link >R 48 Sb ESR. <link > 4% We ETE <head> i 5}, 
链 和 标签 的 语法 : 


< link rel = "stylesheet" type = "text/css" href ="styles.css" /> 


rel: 指定 当前 文档 和 链接 文件 之 间 的 关系 ,这 里 是 一 个 样式 表 链 接 。 
type: 指定 链接 的 文档 的 MIME 类 型 。 
href; 指定 链接 的 文档 的 位 置 ,这 里 是 到 外 部 样式 表 (. css) 文 件 的 路 径 。 
例 3.4 链 入 外 部 样式 表 文件 。 
<html> 
<head> 
< link rel = "stylesheet" type = "text/css" href = "layout. css" /> 
</head> 
< body> 
<hl class = "mylayout"> This heading uses the style. </h1 > 
< hl > This heading doesn’t use the style. </h1 > 
</body> 
</html> 
例 3. 4 在 浏览 器 显示 结果 如 图 3. 2 所 示 ,与 例 3. 2 相同 。 
不 过 ,作为 一 个 内 部 样式 表 , 例 3. 2 只 能 影响 它 所 在 的 页 面 ; 作为 一 个 外 部 的 样式 表 文 
件 , 即 例 3. 3 的 layout. css, 可 应 用 于 网 站 内 的 任何 HTML 文档 。 


2. 导入 
在 内 部 样式 表 中 使 用 导入 的 外 部 样式 表 , 这 样 外 部 样式 表 导 入 后 ,内 部 样式 表 的 属性 不 
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受 任 何 影响 。 
导 人 外 部 样式 表 的 语法 : 


<style type = "text/css"> 
== 
@ import url("styles1. css"); 
@ import url("styles2. css"); 
internal style sheet declaration 
--> 
</style> 


stylesl. css,styles2. css 等 都 是 导 人 到 本 网 页 的 外 部 样式 表 文 件 。 

注意 : 

(1) @import 声明 必须 置 于 二 style 记 元 素 的 开始 部 分 ,然后 才 是 内 部 样式 表 声 明 。 
(2) @import 声明 的 顺序 决定 样式 表 如 何 层 党 。 

(3) @import 声明 后 的 分 号 不 能 省 略 。 

可 以 导入 许多 的 外 部 样式 表 来 维护 网 站 。 

例 3.5 导入 外 部 样式 表 文 件 。 


<html> 
<head> 
<style type = "text/css"> 
<== 
@ import url("layout.css"); 
--> 
</style> 
</head > 
< body > 
<hl class = "mylayout"> This heading uses the style. </h1 > 
<hl> This heading doesn’t use the style.</hl > 
</body > 
</html> 


例 3.5 在 浏览 器 中 显示 如 图 3. 2 所 示 , 和 例 3. 2, Bi 3.4 相同 。 

ER: 外 部 样式 表 是 把 样式 定义 单独 创建 一 个 外 部 文件 中 ,扩展 名 为 . css。 然 后 在 
HTML X45 P 48 A <link>& @import 的 方式 将 外 部 样式 表 文 件 引 入 文档 ,对 网 页 进行 布 
局 展示 。 这 是 CSS 推荐 的 方式 ,也 是 CSS 的 优势 所 在 ,使 用 一 个 外 部 样式 表 文 件 ,可 以 完成 
对 整个 网 站 的 网 页 外 观 、 布 局 .图像 字号、 字体 等 的 设计 。 

如 本 小 节 所 述 , 引 入 外 部 样式 表 有 两 种 方法 ,两 种 方法 的 使 用 效果 是 一 样 的 ,读者 可 以 
选取 其 中 一 种 方法 使 用 即 可 。 


3.2.4 BB 


层 倒 样式 表 或 CSS 的 设置 能 够 使 许多 属性 影响 到 同一 个 元 素 。 其 中 一 些 属性 与 另 一 
些 属 性 可 能 会 发 生 冲 突 。 比 如 ,段落 标签 上 的 字体 颜色 可 能 设置 的 是 红色 ,之 后 又 有 一 个 设 
置 将 这 个 段落 标签 的 字体 颜色 设 为 蓝 色 。 浏 览 器 如 何 知 道 这 个 段落 最 终 是 什么 颜色 ? 这 是 
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HERREN. 
1. 三 种 样式 的 样式 表 


CL) 作者 样式 。 这 是 由 网 页 设计 者 创建 的 样式 表 , 也 是 多 数 人 所 想到 的 CSS 样式 表 。 

(2) 用 户 样式 。 用 户 样式 表 由 网 页 的 用 户 创建 ,这 人 允许 用 户 能 更 好 地 控制 页 面 的 显示 。 

(3) 浏览 器 样式 。Web 浏览 器 将 样式 应 用 到 页 面 帮助 显示 页 面 。 

上 述 每 种 样式 有 不 同 的 权重 。 默 认 情 况 下 ,作者 样式 是 第 一 位 ,用 户 的 样式 次 之 ,最 后 
是 浏览 器 样式 。 唯 一 的 例外 是 在 用 户 样式 中 的 !important 规则 , 它 比 作者 样式 更 优先 (有 
更 高 的 权重 ) 。 


2. RRM 


为 解决 冲突 ,Web 浏览 器 使 用 下 列 排序 ,以 确定 哪些 样式 将 优先 使 用 。 

(1) 首先 ,寻找 元 素 的 所 有 声明 和 指定 的 媒体 类 型 (正确 显示 在 各 类 媒体 ,如 在 屏幕 上 、 
在 纸 上 或 移动 电话 上 ) 。 

(2) 再 看 看 它 是 来 自 什 么 样式 表 。 如 上 所 述 , 作 者 样式 第 一 位 ,然后 是 用 户 ,然后 浏览 
器 。 有 !important 的 用 户 样式 比 有 !important 的 作者 样式 有 更 高 的 优先 级 。 

(3) 一 个 选择 符 越 是 具体 , 它 会 得 到 越 高 的 优先 级 。 例 如 ,一 个 “div. co p” 的 样式 比 一 
个 “p” 标 签 有 更 高 的 优先 级 。 

CA) 最 后 , 按 它们 被 定义 的 顺序 排列 。 在 文档 中 后 面 被 定义 的 规则 比 前 面 被 定义 的 有 
更 高 的 优先 级 。 导 入 的 外 部 样式 表 规 则 被 认为 出 现在 内 部 样式 表 中 的 规则 之 前 。 


3. !important 规则 


层 秋 意味 着 样式 按照 浏览 器 读 取 它 们 的 顺序 来 执行 。 第 一 个 样式 首先 被 应 用 ,然后 是 
第 二 个 。 因 此 ,如 果 一 个 样式 出 现在 样式 表 的 顶部 ,然后 在 样式 表 下 部 被 改变 ,那么 被 实际 
应 用 的 是 该 样式 的 第 二 个 实例 ,而 不 是 第 一 个 。 例 如 ,在 下 面 的 样式 表 的 例子 中 ,该 段 文本 
将 显示 为 黑色 ,即使 第 一 个 样式 属性 是 红色 的 。 

例 3.6 最 近 的 样式 优先 级 最 高 。 


<html> 
<head> 


<style type = "text/css"> 
<= 
p { color: #££0000; } 
p { color: #000000; } 
==> 
</style> 
</head > 
< body > 
<p>This is a paragraph.</p> 
</body > 
</html> 
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‘important 规则 是 有 特权 的 层 倒 , 它 保证 最 重要 的 规则 永远 被 应 用 。 一 个 有 
1important 规则 的 属性 ,无 论 这 一 规则 它 在 CSS 文档 中 何 处 出 现 , 都 将 被 应 用 。 因 此 ,如 果 
设计 者 要 确保 一 个 属性 始终 应 用 ,可 以 添加 !important 属性 到 这 个 标签 。 因 此 ,为 了 使 该 
段 文字 总 是 显示 为 红色 ,将 上 面 的 例子 改变 如 下 。 

例 3.7 使 用 !important 规则 。 


<html > 
< head > 
<style type = "text/css"> 
he 
p { color: #££0000 ! important } 
p { color: #000000; } 
--> 
</style> 
</head > 
< body > 
<p> This is a paragraph. </p> 
</body > 
</html> 


4. 用 户 样 式 中 的 !important 


important 的 规则 也 用 来 帮助 网 页 浏览 用 户 应 付 那些 让 他 们 使 用 起 来 很 困难 的 网 页 。 
通常 ,如 果 一 个 用 户 也 定义 一 个 样式 表 来 浏览 网 页 ,用 户 样式 表 将 服从 于 网 页 作者 的 样式 
表 。 但 是 如 果 用 户 标 记 一 个 样式 为 1important ,那个 样式 会 替代 网 页 作者 样式 表 , 即 使 网 页 
作者 用 !important 标记 他 们 的 规则 。 

这 是 CSS2 上 的 一 个 变化 。 在 CSS1 中 ,!important 作者 样式 表 的 规则 优先 于 
1!important 用 户 样式 表 。CSS2 改变 了 这 点 ,用 户 样式 表 具 有 优先 权 。 

WA: 层 登 优先 级 按 次 序 从 高 到 低 依次 为 : 

(1) 标记 为 1important 的 用 户 样式 ; 

(2) 标记 为 1important 的 作者 样式 ; 

(3) 作者 样式 ; 

(4) 用 户 样式 ; 

(5) 浏览 器 默认 样式 。 

对 于 设计 人 员 来 说 ,作者 样式 有 三 种 : 行内 样式 (Inline Style)、 内 部 样式 (Internal 
Style) 和 外 部 样式 (External Style) ,根据 规定 ,这 三 种 样式 的 优先 级 别 从 高 到 低 依次 为 : 

(1) 行内 样式 ; 

(2) 内 部 样式 ; 

(3) 外 部 样式 。 

样式 表 的 层 合 也 可 以 从 继承 性 来 理解 ,样式 表 的 继承 规则 是 : 外 部 的 元 素 会 保留 下 来 ， 
由 这 个 元 素 所 包含 的 其 他 元 素 继 承 ; 所 有 在 元 素 中 谈 套 的 元 素 都 会 继承 外 层 元 素 指定 的 属 
性 值 ; 有 时 会 把 多 层 眶 套 的 样式 登 加 在 一 起 ,除非 另外 更 改 ; 多 个 样式 对 一 个 元 素 的 定义 
发 生 冲 突 时 ,以 最 后 定义 的 为 准 ( 没 有 使 用 !important 规则 情况 下 , 见 本 小 节 的 两 个 例子 ) 。 
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EER CSS 设计 重要 的 概念 ,网 站 设计 人 员 必 须 对 此 概念 有 明晰 的 理解 。 作 为 设计 人 
员 ,在 使 用 作者 样式 时 ,可 以 遵守 最 佳 实 践 ( 见 下 一 小 节 ) ,杜绝 行内 样式 的 出 现 , 尽 量 少 用 内 
部 样式 ,在 只 使 用 外 部 样式 的 情况 下 ,可 以 使 得 样式 定义 冲突 减少 ,但 并 不 能 完全 消失 。 因 
为 外 部 样式 表 中 定义 的 多 个 元 素 样式 ,在 HTML 文档 中 由 于 不 同 的 嵌 套 关系 ,不 可 避免 地 
会 产生 定义 冲突 。 何 况 还 有 用 户 样 式 及 浏览 器 样式 这 些 网 站 设计 者 所 不 能 掌控 的 样式 ,也 
会 和 作者 样式 发 生 冲 突 。 因 此 在 设计 时 ,需要 对 CSS 的 层 合 有 一 个 前 瞻 性 的 考虑 。 


3.2.5 CSS 最 佳 实践 


CSS 已 经 成 为 网 页 样式 与 布局 设计 事实 标准 ,既然 大 多 数 人 都 使 用 它 , 就 需要 关心 如 
何 把 它 用 好 。 有 三 种 方法 使 用 样式 表 , 虽 然 它们 都 有 不 同 的 目的 ,但 是 使 用 它们 的 形式 有 好 
有 坏 。 了 解 CSS 的 网 页 设计 的 最 佳 实践 将 确保 网 页 完美 无 缺 。 


1. CSS 最 佳 实践 


最 佳 实践 是 已 被 证 明 是 最 有 效 的 ,对 工作 有 最 大 回报 的 设计 和 制作 网 页 的 方法 。CSS 
最 佳 实践 可 以 在 以 下 方面 帮助 改善 网 站 ， 

(1) 将 内 容 与 设计 分 开 。CSS 的 主要 目标 之 一 是 消除 HTML 中 的 设计 元 素 并 把 它们 
放 在 其 他 地 方 以 便 设计 者 维护 。 这 意味 着 ,设计 师 只 需要 维护 网 站 的 外 观 展示 ,而 不 必 做 一 
个 内 容 开发 人 员 。 

(2) 维护 方便 。 网 页 设计 中 最 容易 被 遗忘 的 元 素 之 一 就 是 维护 。 网 站 总 是 变化 的 一 
从 网 站 上 的 外 观 、 内 容 及 内 部 链接 都 在 变化 。 让 CSS 文件 在 一 个 核心 位 置 使 得 它 更 容易 
维护 。 

(3) 保证 网 站 更 易 访问 。 使 用 CSS 样式 可 以 使 网 站 更 容易 被 残疾 人 使 用 ,更 容易 被 搜 
索引 擎 找到 。 

(4) 网 站 将 更 久 地 紧 跟 最 新 技术 。 使 用 CSS 最 佳 实践 , 当 网 站 设计 环境 变化 时 ,这 些 设 
计 仍 然 能 够 工作 ,具有 相当 的 灵活 性 。 


2. 什么 才 是 CSS 最 佳 实践 


使 用 外 部 样式 表 而 不 是 使 用 行内 样式 。 外 部 样式 表 拥 有 CSS 最 佳 实践 的 所 有 优点 ,并 
且 易 于 使 用 。 如 果 必 须 在 一 个 特定 的 HTML 文档 内 放 入 样式 ,把 它们 放 在 内 部 样式 表 中 ， 
并 把 内 部 样式 表 的 放 在 这 些 文件 的 王 head 过 部分。 这样 ,至少 它 们 仍 与 内 容 分 开 。 避 免 对 
网 页 的 任何 内 容 使 用 行内 样式 。 

提示 : 了 解 CSS 设计 的 最 佳 实 践 ,设计 网 页 则 会 事半功倍 。 综 上 所 述 ,读者 也 更 明白 为 
什么 在 网 页 设计 中 要 避免 出 现行 内 样式 (Inline Style) ,因为 它 违反 以 上 所 有 的 最 佳 设 计 方 
法 。 既 然 这 样 ,问题 出 来 了 : 为 什么 CSS 还 要 留 着 行内 样式 ? 根据 前 一 小 节 的 层 登 概念 , 行 
内 样式 是 设计 者 所 能 掌控 的 样式 中 优先 级 最 高 的 样式 ,因此 它 所 产生 的 效果 不 会 被 其 他 样 
式 所 覆盖 。 根 据 这 一 特性 ,网 页 设计 人 员 可 以 在 测试 样式 效果 时 使 用 它 , 起 到 立竿见影 的 效 
果 。 但 要 注意 的 是 ,效果 测试 成 功 后 ,需要 把 这 部 分 内 容 做 到 外 部 样式 表 文 件 中 ,在 正式 的 
网 页 文件 中 不 要 出 现行 内 样式 。 

同样 ,对 一 个 规范 严谨 的 网 站 ,内 部 样式 (Internal Style) 也 要 尽量 避免 ,因为 它 也 只 是 
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部 分 地 做 到 了 网 页 内 容 与 网 页 设计 相 分 离 。 学 习 CSS 的 目标 就 是 : 建立 一 个 统一 的 外 部 样 
式 表 , 在 网 页 中 调用 它 。 

本 章 在 进行 CSS 举例 的 时 候 , 会 较 多 地 用 到 内 部 样式 (Internal Style) 。 这 是 由 于 为 了 
说 明 举 例 效 果 , 样 式 定 义 都 比较 简短 ,所 以 就 放 在 二 head 二 部 分 的 内 部 样式 中 进行 定义 ,在 
一 个 文件 中 可 以 较 方便 地 对 比 CSS 的 样式 定义 代码 与 其 在 HTML 内 容 上 产生 的 效果 ,与 
本 章 所 提倡 的 实际 网 页 设计 中 尽 可 能 使 用 外 部 样式 并 不 矛盾 。 同 时 ,由 于 本 教材 有 大 量 例 
子 , 为 使 读者 注意 力 集 中 在 所 讲解 的 内 容 , 同 时 也 为 节省 篇 幅 , 正 常 网 页 文件 中 应 该 有 的 
DTD 声明 及 所 head 之 部 分 的 <title 之 标签 ,在 示例 中 一 般 不 写 , 但 在 沃克 俱乐部 的 项 目 举 
例 中 会 完整 表现 出 来 。 


3.3 类 选择 符 和 id 选择 符 


3.3.1 CSS 语法 
CSS 的 语法 由 三 部 分 组 成 : 选择 符 、 属 性 和 值 。 


selector {property: value} 
选择 符 通常 是 HTML 元 素 / 标 签 。 属 性 和 值 之 间 用 冒号 ,并 用 大 括号 包围 ,如 : 
body {color: black} 


如 果 有 多 个 属性 被 指定 ,每 个 属性 必须 用 分 号 隔 开 。 下 面 的 例子 显示 了 如 何 定义 一 个 
段落 中 心 对 齐 ,文本 颜色 为 绿色 : 


p {text - align: center; color: green} 

如 果 该 值 是 多 个 单词 ,用 引号 括 起 来 : 

p {font ~ family: "sans serif"} 

为 了 使 样式 定义 更 具 可 读 性 ,可 以 在 每 一 行 声明 一 个 属性 ,如 : 


Pp 

{ 

text — align: center; 

color: red; 

font - family: Arial 

} 

多 个 选择 符 可 以 一 次 定义 ,每 个 独立 的 选择 符 以 逗号 分 开 。 在 下 面 的 例子 中 所 有 的 标 
题 元 素 都 被 一 次 性 定义 ,所 有 标题 内 容 以 蓝 色 显 示 文 字 颜 色 。 

例 3.8 一 次 性 定义 多 个 选择 符 。 

<html> 

< head > 


<style type = "text/css"> 
<= 
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hi, h2, h3, h4, h5, h6 
{ 
color:blue 
} 
--> 
</style> 
</head> 
< body> 
<hl >This is heading 1 </hl > 
<h2> This is heading 2 </h2 > 
< h3 >This is heading 3 </h3 > 
<h4 > This is heading 4 </h4 > 
<h5 > This is heading 5 </h5> 
<h6 >This is heading 6 </h6 > 
</body > 
</html> 
CSS 注释 
注释 是 用 来 解释 HTML 代码 的 ,在 以 后 编辑 源 代码 时 帮助 网 页 的 设计 者 。 注 释 将 被 
浏览 器 忽略 。 一 个 CSS 注释 以 “/ x* ”开头 ,以 “x* /” 结 尾 ,如 : 
/* This is a comment * / 
P 
{ 
text — align:center; 
/ * This is another comment * / 
color: red; 
font — family: Arial 
提示 : 在 浏览 器 中 看 一 下 例 3. 8 效果 ,读者 可 以 初步 了 解 CSS 设计 的 优点 与 理念 。 在 
HTML 中 ,每 一 个 标签 都 对 应 一 定 的 内 容 , 比 如 二 p 记 标签 ,是 设 定 一 个 段落 ,一 h# 一 是 设 
定 一 个 1 号 到 6 号 的 标题 ,虽然 也 有 对 齐 、 字 体 及 颜色 等 功能 ,但 需要 在 每 个 标签 内 进行 定 
LAA RAR HH. Æ CSS 中 , 则 统一 对 这 些 标签 进行 对 齐 、 字 体 、 字 号 、 色 彩 等 布局 展 
示 方 面 进 行 定 义 , 在 随后 的 一 body 之 中 使 用 的 相应 的 HTML 标签 ,就 使 用 这 种 定义 ,一 次 
定义 ,反复 使 用 ,多 处 使 用 ,这 就 是 CSS 的 优势 所 在 。 
从 现在 开始 ,除非 举例 的 特别 需要 ,一 body 二 中 的 HTML 标签 ,不 再 使 用 诸如 对 齐 、 颜 
色 等 属性 设置 ,这 些 工作 都 交 由 CSS 来 完成 ,HTML 标签 专注 于 内 容 属 性 的 设置 ,如 href, 
src 等 。 


3.3.2 类 选择 符 


其 实 , 类 选择 符 的 概念 已 经 显示 在 例 3.2 中 。 

用 类 选择 符 , 不 同 的 样式 可 以 被 定义 到 同一 个 HTML 元 素 上 。 

比如 想 在 HTML 文件 中 有 两 种 类 型 的 hl 二 : 一 个 右 对 齐 的 二 hl 之 ,一 个 居中 的 
< 过 hl 过。 下面 是 它 如 何 使 用 样式 做 到 这 一 点 。 
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SN 
例 3.9 对 hl 元 素 使 用 类 选择 符 。 


<html> 
<head> 
<style type = "text/css"> 
<= 
hl. right {text — align:right} 
hl. center {text — align:center} 
==> 
</style> 
</head > 
<body> 
<hl class = "right"> This heading is on the right </hl > 
<hl class = "center">This heading is in the middle </hl > 
</body > 
</html> 


例 3. 9 在 浏览 器 上 的 显示 效果 如 图 3. 3 所 示 o 


@ Di\Example\Example3-9.html - Windows Internet Explorer ool) 
GO ¢ [E dAexample\example3-9:html +] 4|x|[P Eee P | 


ve 收藏 夫 BD:\Example\Example3-9.html 


This heading is on the right Í 
This heading is in the middle 


图 3.3 使 用 类 选择 符 定义 相同 的 元 素 
类 选择 符 的 语法 如 下 ， 


tagl.classnamel {property: value; property: value; --- } 
tag2.classname2 { property: value; property: value; -- } 


tagN. classnameN { property: value; property: value; --- } 


tag. classname 仍然 被 称 为 选择 符 。 类 名 定义 类 选择 符 的 名 称 ; 名 称 可 以 是 任何 字母 
的 组 合 或 以 字母 开始 的 字母 和 数字 的 组 合 。 不 要 用 数字 作为 类 名 称 的 开头 。 
在 HTML 文件 中 使 用 类 选择 符 的 语法 : 


< tag class= "classnamel classname2 …"> content </tag> 


要 在 一 个 给 定 的 元 素 上 应 用 多 个 类 ,类 之 间 要 用 空格 隔 开 。 
例 3. 10 一 个 元 素 调用 多 个 类 。 
<html> 


<head> 
<style type = "text/css"> 
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<== 
hl. right {text - align:right} 
hl. border {border - width: 1; border: solid} 
--> 
</style> 
</head> 
< body> 
< h1 class = "right border"> This heading is on the right </hl > 
</body> 
</html> 


例 3. 10 在 浏览 器 上 的 显示 效果 如 图 3.4 所 示 。 


@ DAExample\Example3-10.html - Windows Internet Explorer feta rs) 


Go œ [E] DAExample\Example3-10.html ~| 4] x |[P Eee Pr 


we MGB |B D.\Example\Example3-10.html 


This heading is on the right 


图 3.4 在 一 个 元 素 上 应 用 多 个 类 


如 果 想 让 一 个 类 被 所 有 的 HTML 元 素 使 用 ,可 以 将 类 名 前 边 标 签 省 略 。 在 下 面 的 例 
子 中 ,所 有 引用 class="center" hy HTML 元 素 都 将 居中 对 齐 。 
例 3.11 多 个 标签 调用 同一 个 类 。 


<html> 
<head> 
<style type = "text/css"> 
<!-- 
.center {text — align:center} 
--> 
</style> 
</head > 
< body> 
< h1 class = "center"> This heading 1 is in the middle </h1 > 
< h4 class = "center"> This heading 4 is in the middle too </h4 > 
<p class = "center"> This paragraph is also center - aligned. </p> 
</body> 
</html> 


例 3. 11 在 浏览 器 上 的 显示 效果 如 图 3. 5 所 示 。 
说 明 : 类 选择 符 定义 方式 有 两 种 : 有 标签 的 类 选择 符 ,其 适用 范围 只 限于 该 标签 所 包 


75 


Vy Web 前 端 设计 一 一 HTML+CSS+jQuery 技 术 教 程 


SHAS: 省 略 标签 的 类 选择 符 ( 注 意 在 定义 时 类 名 前 边 不 要 忘 了 加 点 “.”), 可 以 使 任意 
HTML 标签 套用 这 种 预先 定义 好 的 类 样式 。 读 者 可 以 尝试 将 例 3. 11 的 居中 对 齐 样式 定义 
RA: 

h4 .center {text — align:center} 

其 他 内 容 不 变 , 用 浏览 器 显示 ,发 现 只 有 h4 居中 ,其 他 两 个 元 素 居 左 ( 缺 省 对 齐 方式 ) 。 
这 种 省 略 HTML 标签 的 类 选择 符 是 最 常用 的 定义 方法 ,影响 范围 大 ,使 用 方便 灵活 。 


@ D:\Example\Example3-11.html - Windows Internet Explorer Sl] 
Go- [E] DAExample\Example3-11.html ~|4|x|[P aes Pr 


vy b (Æ D:\Example\Example3-11.html 


This heading 1 is in the middle 
This heading 4 is in the middle too 


This paragraph is also center-aligned. 


图 3.5 类 选择 符 被 多 个 元 素 调 用 


3.3.3 id 选择 符 

和 类 选择 符 一 样 ,id 选择 符 有 两 种 类 型 的 定义 : 含有 HTML 标签 和 不 含 HTML 标签 。 
RA HTML 标签 的 id 选择 符 的 语法 : 

tagl + idnamel {property: value; property: value; …} 

tag2 + idname2 { property: value; property: value; -- } 

tagN + idnameN { property: value; property: value; …} 

KE HTML 标签 的 id 选择 符 的 语法 : 

# idname1 {property: value; property: value; … } 

# idname2 { property: value; property: value; --- } 

# idnameN { property: value; property: value; -- } 


id 的 名 称 可 以 是 任何 字母 的 组 合 或 以 字母 开始 的 字母 和 数字 的 组 合 , 不 要 用 数字 作为 
id 名 称 开头 ,因为 在 一 些 浏览 器 中 它 无 法 正常 工作 。 

在 HTML 文件 中 调用 id 选择 符 的 语法 : 

<tag id= "idname"> content </tag> 

id 选择 符 与 类 选择 符 对 比 

除 句 号 (. ) 和 磅 符号 (# ) 区 别 之 外 ,id 选择 符 和 类 选择 符 之 间 似 乎 没有 差异 。 在 讨论 
区 别 之 前 , 先 来 知道 CSS 为 什么 要 选择 这 些 名 字 。 

id: 一 个 人 的 身份 (ID) 是 独一无二 的 。 


类 : 在 一 类 中 有 很 多 人 。 

所 以 ， 

id 是 独一无二 的 : 

。 每 个 元 素 只 能 有 一 个 id。 

。 每 个 页 面 只 能 有 一 个 元 素 使 用 该 id。 

类 不 是 独一无二 的 : 

。 同一 个 类 可 用 于 多 个 元 素 。 

。 几 个 类 可 用 于 同一 元 素 。 

标准 规定 ,任何 给 定 的 id 名 只 能 被 页 面 或 文件 引用 一 次 。 从 以 往 的 经 验 看 ,CSS 布局 
中 id 最 经 常 被 正确 应 用 于 页 面 布局 。 因 为 通常 每 页 只 有 一 个 菜单 ,一 个 通栏 标题 一 个 内 
容 窗 格 。 

每 页 只 使 用 一 次 时 用 id, 每 页 使 用 一 次 或 多 次 时 使 用 类 。 

例 3.12 id 被 HTML 文件 多 次 调用 。 


<html > 
<head> 
<style type = "text/css"> 
<== 
# center {text - align:center} 
--> 
</style> 
</head > 
< body > 
< hl id = "center"> This heading 1 is in the middle </hl > 
<h4 id= "center"> This heading 4 is in the middle too </h4 > 
<p id= "center"> This paragraph is also center ~ aligned. </p> 
</body > 
</html> 


例 3.12 在 浏览 器 上 的 显示 为 图 3.5 所 示 , 和 例 3.11 的 显示 相同 。 但 是 ,如 果 用 W3C 
的 标准 验证 例 3. 12( 网 址 : http://validator. w3. org/) ,错误 信息 的 显示 如 图 3.6 所 示 。 

提示 : 从 语法 上 来 看 ,id 选择 符 的 声明 及 使 用 和 类 选择 符 是 类 似 的 ,只 是 名 称 和 使 用 的 
符号 有 所 变化 。 但 两 者 有 实质 上 的 区 别 。id 选择 符 , 顾 名 思 义 ,是 独一无二 的 ,所 以 它 在 
一 个 网 页 中 只 能 出 现 一 次 ,一 个 元 素 也 只 能 引用 一 个 id 选择 符 , 类 选择 符 则 可 以 多 次 
使 用 。 

虽然 在 例 3. 16 中 ,一 个 网 页 多 次 使 用 id 选择 符 并 且 显示 结果 与 例 3.15 使 用 类 选择 符 
时 的 显示 结果 相同 ,但 它 不 符合 W3C 标准 ,所 以 标准 性 测试 就 出 现 了 如 图 3.6 的 错误 信息 ， 
同时 也 明确 地 给 出 了 错误 原因 。 

通过 以 上 分 析 , 可 以 看 出 由 于 类 选择 符 可 以 使 用 一 次 ,也 可 以 使 用 多 次 ,灵活 性 要 好 于 
id 选择 符 , 所 以 一 些 网 页 设计 者 偏好 使 用 类 选择 符 。 如 菜 个 样式 定义 肯定 在 页 面 中 只 出 现 
一 次 ,比如 页 头 、 页 脚 等 ,使 用 id 选择 符 是 一 个 不 错 的 办 法 。 
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A 
@ [Invalid] Markup Validation of Example3-12.html - W3C Markup Validator - Windows Inte... [= |E J[ 5 
p~l 


Go- [IE hitp://validatorwa.org/ch ~| 8] 4s|x ||P seer 
| XHA RRE EEV GERA IRM 。 帮助 (H) 
i a [Invalid] Markup Validation of Example3-12.... 


© Line 11, Column 13: ID "CENTER" already defined 
2 
<h4 id=" enter">This heading 4 is in the middle too</h4> 


An "id" is a unique identifier. Each time this attribute is used in a document it 
must have a different value. If you are using this attribute as a hook for style 
sheets it may be more appropriate to use classes (which group elements) than 


id (which are used to identify exactly one element). 


® Line 10, Column 13: ID "CENTER" first defined here 


<hl id="c enter">This heading 1 is in the middle</hi> 


© Line 12, Column 12: ID "CENTER" already defined 
a 


<p id=" c enter">This paragraph is also center-aligned.</p> 


‘ 


图 3.6 验证 错误 提示 : id 被 使 用 (定义 ) 了 多 次 


6.4 CSS 常用 属性 


3.4.1 CSS 字体 
CSS 字体 属性 定义 了 字体 名 称 .字体 加 粗 、 大 小 及 文字 样式 等 。 


1. 字体 名 称 


属性 : font-family 

值 Times,Georgia, Arial 宋体. 隶书、 楷体 … 

一 个 文本 的 字体 由 字体 名 称 属性 来 设置 。 字 体 名 称 属性 可 以 容纳 几 个 字体 名 称 作为 后 
备 字体 。 如 果 浏 览 器 不 支持 第 一 个 字体 , 它 会 尝试 下 一 个 字体 。 

注意 : 如 果 一 种 字体 的 名 字 是 多 个 单词 , 它 必 须 用 引号 ,如 字体 名 称 Times。 


字体 名 称 列表 中 指定 多 个 字体 名 称 时 ,使 用 逗号 分 隔 ; 


p{font - family:"Times", Georgia, Serif} 


2. 字体 大 小 
属性 : font-size 
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值 ; length | % | small | medium | large | smaller | larger | … 

字体 大 小 属性 设置 文字 的 大 小 。 

能 够 管理 的 文字 大 小 在 Web 设计 中 很 重要 。 但 是 ,字体 大 小 调整 不 应 用 来 使 段落 看 起 
来 像 标题 ,或 者 使 标题 看 起 来 像 段 落 。 始 终 使 用 正确 的 HTML 标签 ,用 二 hl 二 到 二 h6 二 来 
设置 标题 ,一 p> 来 设置 段落 。 

字体 大 小 的 值 可 以 是 一 个 绝对 或 相对 的 值 。 

绝对 大 小 (mm cm in pt): 

。 设置 文本 到 指定 大 小 。 

。 不 允许 用 户 在 所 有 浏览 器 中 改变 文字 大 小 (不 适宜 用 户 浏览 ,适宜 于 打印 输出 ) 。 

。 当 输 出 的 物理 尺寸 是 已 知 的 时 候 : 绝 对 大 小 非常 有 用 。 

相对 大 小 (em、ex、px): 

。 根据 周围 元 素 设置 大 小 。 

。 允许 用 户 改变 浏览 器 文字 的 大 小 。 

下 面 的 例子 用 像素 单位 设置 字体 大 小 。 

例 3.13 设置 文字 大 小 。 


<html> 
<head> 
<style type = "text/css"> 
a= 
hl {font - size: 40px} 
h2 {font - size:30px} 
p {font - size:14px} 
=o > 
</style> 
</head> 
< body> 
< hl >This is heading 1 </hl > 
< h2 > This is heading 2 </h2 > 
<p>This is a paragraph. </p> 
</body> 
</html> 


例 3.13 在 浏览 器 上 的 显示 效果 如 图 3.7 所 示 。 

Internet Explorer 无 法 在 例 3.13 中 调整 字体 大 小 。 为 了 避免 IE 中 文字 大 小 调整 的 问 
题 ,许多 设计 者 使 用 em 而 不 是 像素 。 一 单位 em 的 大 小 是 由 W3C 推荐 的 。lem 等 于 当前 
字体 大 小 。 在 浏览 器 中 文字 的 默认 大 小 为 16px。 所 以 ,lem 默认 大 小 为 16px。 从 像素 到 
em 的 大 小 使 用 这 个 公式 计算 : 像素 /16 = em。 

例 3.14 使 用 em 单位 设置 字体 大 小 。 例 3. 14 在 浏览 器 显示 如 图 3.7 Bras. FA em 设 
置 的 文字 大 小 与 例 3.13 的 像素 相同 ,但 Internet Explorer 可 以 调整 字体 大 小 。 

例 3.14 使 用 em 单位 设置 文字 大 小 。 


<html> 
<head> 
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This is 


This is a parag: 


RKO 

Saw 
tm ©) aM 
FATA) 7| dys) 


图 3.7 通过 使 用 像素 或 em 单位 的 字体 大 小 


<style type = "text/css"> 
Ss 
hl {font - size:2.5em} /* 40px/16 = 2.5em * / 
h2 {font - size:1.875em} / * 30px/16 = 1.875em * / 


p {font - size:0.875em} /* 14px/16=0.875em * / 
==> 
</style> 

</head> 

< body> 
<hl >This is heading 1 </hl > 
<h2> This is heading 2 </h2 > 
<p>This is a paragraph. </p> 

</body> 

</html> 


3. 字体 风格 
属性 : font-style 


值 : normal (default) | italic | oblique 


字体 风格 属性 主要 是 用 于 指定 斜体 文本 。 


这 个 属性 有 三 个 值 : 

* normal 该 文本 正常 显示 (默认 值 ) 。 

e italic 该 文本 显示 为 斜体 。 

。 oblique 该 文本 是 “斜体 ”Coblique 类 似 斜 体 ,但 支持 它 的 浏览 器 较 少 ) 。 


例 3.15 字体 风格 。 


<html> 
<head> 
<style type = "text/css"> 
<== 
.normal {font ~ style:normal} 
. italic {font - style: italic} 
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. oblique {font - style:oblique} 
==% 
</style> 
</head> 
< body> 
< h1 class = "normal"> This is heading 1, normal </hl > 
< h2 class = "italic"> This is heading 2, italic </h2 > 
< h3 class = "oblique"> This is heading 3, oblique </h3 > 
</body> 
</html> 


例 3. 15 在 浏览 器 上 的 显示 效果 如 图 3. 8 所 示 。 


OO [ownpeeom -|9|x|[P Eee ER 


:文件 (有 RRD SEV (A) IAM 帮助 (H) 


Se tH | D.\Example\Example3-15.html , 


This is heading 1, normal 


This is heading 2, italic 


This is heading 3, oblique 


图 3.8 CSS 字体 风格 


5. 字体 粗细 


属性 : font-weight 

值 : normal (default) | bold | bolder | lighter | 100 | 200 | 300 | … 

字体 粗细 属性 指定 了 字体 的 粗细 。 它 主要 的 值 有 两 个 : normal (default) | bold ,使 用 
WF: 


. bold{ font - weight : bold} 
. normal { font — weight : normal} 


6. 字体 变化 


属性 : font-variant 

值 : normal (default) | small-caps | inherit 

字体 变化 属性 决定 一 个 文本 是 否 应 显示 小 型 大 写字 母 。 它 主要 的 值 有 两 个 : normal 
(default) | small-caps, 使 用 如 下 : 


.small 
{ 


font — variant: small ~ caps; 


} 
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7. 字体 简写 属性 


属性 : font 

值 ( 按 顺序 ): font-style font-variant font-weight font-size/line-height font-family 

字体 简写 属性 将 所 有 的 字体 属性 集 于 一 体 。 可 设置 的 属性 是 ( 按 顺 序 ): 字体 风格 、 字 
体 变 化 .字体 粗细 ,字体 大 小 或 行 高 .字体 名 称 。 行 高 属性 设置 行 与 行 间 的 空间 。 

如 果 上 述 值 在 简写 中 有 和 缺少 ,例如 *font:100%% verdana;”, 则 以 默认 值 代替 缺少 的 值 。 
字体 简写 属性 可 以 这 样 使 用 : 


.sl {font: italic normal bold 1.2em Arial} 


提示 : 字体 的 属性 在 本 小 节 已 经 全 部 列 出 ,但 属性 值 却 有 很 多 ,比如 字体 名 称 , 读 者 可 
以 根据 需要 选择 相应 的 字体 。 关 于 字体 属性 有 几 点 需要 说 明 : 

(1) 字体 大 小 (font-size) 有 许多 单位 ,有 绝对 大 小 (如 mm、cm、pt 等 ), 有 相对 大 小 (如 
em、px 等 ,px 是 相对 设备 大 小 ), 这 种 属性 单位 概念 在 最 后 一 小 节 讲 解 。 网 页 设计 中 ,W3C 
推荐 使 用 em 单位 。 

(2) 字体 变化 (font-variant) 是 将 英文 设 定 成 全 部 小 型 大 写字 母 , 此 属性 对 中 文 没有 
作用 。 

(3) Font 属性 是 把 前 边 所 学 的 所 有 字体 属性 一 次 性 完成 声明 ,在 实际 网 页 设计 中 , 推 
荐 使 用 这 种 办 法 设 定 字体 属性 。 要 注意 必须 按 文中 指定 的 属性 顺序 声明 。 


3.4.2 CSS 文 本 
CSS 文本 属性 定义 文本 的 外 观 。 
1. 文本 对 齐 


属性 : text-align 

值 : left | center | right | justify 

text-align 属性 用 于 指定 水 平 对 齐 的 文本 ,文本 可 以 居中 (center) ,或 向 左 (left) 或 向 右 
Cright) 对齐 ,或 者 是 两 端 对 齐 (justify) 。 如 果 text-align 被 设置 为 justify, 那 么 每 行将 被 拉 
伸 以 使 每 一 行 具有 相同 的 宽度 ,而 且 左右 边 距 也 是 整齐 的 (如 杂志 和 报纸 ) ,textralign 属性 
可 以 这 样 用 : 


.date {text - align:right} 
p {text - align: justify} 


2. 文本 修饰 


属性 : text-decoration 

值 : none | underline | overline | line-through | blink 

text-decoration 属性 用 于 修饰 文本 , 它 经 常用 于 为 凸显 设计 意图 而 去 掉 超 链接 默认 的 
下 划 线 。 
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例 3.16 ”去除 超 链接 默认 的 下 划 线 。 


<html> 
<head> 
< style type = "text/css"> 
a= 
a {text - decoration: none} 
--> 
</style> 
</head> 
< body> 
<a href = "mailto:webmaster@walkerclub. com"> Click to Email me. </a> 
</body> 
</html > 


图 3.9 是 例 3. 16 在 浏览 器 中 的 显示 效果 ,Click to Email me. 的 下 划 线 被 去 掉 。 


(JON E) D:\Example\Exam; ~ | +9| x ||P EM 过 Pr 
| AHD SRO EEV 收藏 夫 (A) IAM 者 助 (H) 


Se GH | DAExample\Example3-16.html | 


Click to Email me. 


图 3.9 用 text-decoration 属性 去 掉 了 超 链 接 的 下 划 线 


3. 文本 缩 进 


属性 : text-indent 

fi: 长 度 | % 

text-indent 属性 用 于 缩 进 第 一 行文 本 。 与 font-size 属性 类 似 , 推 荐 使 用 相对 长 度 单位 
em, text-indent 属性 使 用 方法 : 


div{text - indent: 1.75em} 


4. 文本 颜色 


属性 : color 

值 : 颜色 名 称 | RGB | 十 六 进 制 数 

color 属性 用 于 设 定 文本 颜色 。 颜 色 可 以 被 定义 为 : 
名 称 -颜色 名 称 ,如 red 

RGB - RGB 值 ,如 rgb(255.,0,0) 

十 六 进 制 数 -十 六 进 制 数 ,如 #{f0000 

color 属性 使 用 方法 : 


hl {color: #ff0000} 
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p {color: green} 


5. 字符 间距 


属性 : letter-spacing 

值 : normal (默认 ) | 长 度 

letter-spacing 属性 用 来 设置 字符 间 的 间距 , 当 设置 非 默认 的 字符 间距 时 推荐 使 用 相对 
长 度 单位 em, 

下 面 对 沃 克 俱 乐 部 网 页 使 用 CSS 思想 进行 设计 。 

项 目 3.1 CSS KF layout. css. 


div. content{ text — indent:1.5em} /* 设 定 首 行 缩 进 * / 
.center{ text — align:center} /* 设 定 文本 居中 对 齐 * / 
hr. topwidth{width:80 % } /* 设 定 顶 部 横 线 宽度 / 


项 目 3.2 主页 文件 index. html。 


<html> 
<head> 
<title> 沃 克 俱 乐 部 欢迎 您 </title> 
<! -- 链接 外 部 样式 表 文 件 layout. css --> 
< link rel = "stylesheet" type = "text/css" href = "layout.css" /> 


</head > 
< body > 
<div class = "center"> <! -- 调用 文本 居中 对 齐 类 -- > 
<hl > 咱们 走 着 瞧 - 欢迎 光临 沃克 俱乐部 </hl > 
<hr class = "topwidth" /> <! -- 调用 横 线 宽度 类 --> 


<p> 
<a href = " introduction/articlel. html" target = "_blank"> 健 走 的 方法 </a > &nbsp; 
&nbsp; &nbsp; 
<a href =" introduction/article2. html" target = "_ blank" > fit 3E $ {f </a > Snbsp; 
&nbsp; &nbsp; 
<a href = "activity/activityl. html" target = "blank"> 俱 乐 部 活动 </a> 
</p> 
</div> 
<h3 > 走路 ,简单 有 效 的 健身 之 道 </h3 > 


<div class = "content"> <! -- 调用 首 行 缩 进 类 -- > 
<p> 走 路 是 人 类 本 能 的 身体 活动 , 人 类 身体 结构 就 是 为 步行 设计 的 。 问 题 是 , 随 着 汽车 等 代步 
工具 的 普及 ,人 们 "好 逸 恶 劳 " 的 条 件 和 理由 越 来 越 充足 ,以 致 基本 的 走路 功能 都 有 些 退化 了 。 根 据 美 
国 疾病 控制 与 预防 中 心 的 研究 ,有 高 达 75 % 的 美国 人 每 天 运动 量 不 到 30 分 钟 ,大 部 分 人 几乎 成 天 坐 
在 椅子 上 ,是 不 折 不 扣 的 "沙发 土豆 "。 反 观 我 们 中 国 的 现实 情形 , 随 着 经 济 的 发 展 ,汽车 的 大 量 使 用 
及 其 它 因素 ,导致 缺乏 锻炼 、 体 形 肥胖 的 人 越 来 越 多 。</p> 
<p> 走 路 健身 又 健 脑 。 我 国 自古 就 有 " 走 为 百 练 之 祖 " 的 健身 经 验 谈 , 其 中 传统 医学 认为 , 双 脚 
是 人 体 的 健康 之 根 。 走 路 刺激 脚底 穴位 ,能 每 筋 通 络 ,活血 顺 气 , 强 身 健 体 。 同 时 ,现代 运动 医学 研究 
也 证 实 : 走路 时 ,骨骼 .肌肉 韧带、 神经 末梢 都 要 参加 运动 ,从 而 促进 血液 循环 ,调节 大 脑 皮层 的 活动 
功能 ,促使 身体 各 种 激素 分 泌 , 使 人 心情 愉悦 。 走 路 防 病 并 延缓 衰老 。 最 新 的 医学 研究 表明 ,一 周 健 
步 走 7 小 时 以 上 ,可 以 降低 20% 和 乳腺 癌 、30% 心脏 病 和 50 % 糖尿 病 的 震 患 率 , 而 中 老年 人 每 天 散步 
2.4 公 里 以 上 ,心脏 病 发 作 率 将 降低 50% 。</p> 


</div> 
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<div class = "center"> <! -- 再 次 调用 文本 居中 对 齐 类 --> 
<hr /> 
<p><a href = "mailto: webmaster (@ walkerclub. net"> 和 我 联系 Email: webmaster @ 
walkerclub. net </a> 
</p> 
</div> 
</body > 
</html> 


提示 : 文本 属性 很 多 ,作为 教科 书 , 这 里 只 列 出 了 常用 的 一 些 属 性 。 全 部 的 文本 属性 请 
参阅 CSS 参考 手册 。 

注意 本 小 节 的 项 目 3.1( 样 式 表 文 件 layout. css) 和 项 目 3.2(HTML X# index. html), 
在 这 个 网 页 设计 中 ,已 经 握 弃 了 在 HTML 标签 通过 添加 属性 对 文本 进行 对 齐 、 缩 进 设置 的 
办 法 (参见 项 目 2.3), 而 使 用 了 CSS 的 设计 理念 ,最 后 达到 的 效果 和 第 2 章 项 目 2.3 相同 。 
这 也 是 进行 CSS 学 习 时 所 要 掌握 的 设计 思想 。 


3.4.3 CSS 背景 
CSS 背景 属性 是 用 来 为 元 素 定义 背景 效果 。 
1. 背景 颜色 


属性 : background-color 

值 : 颜色 名 称 | RGB | 十 六 进 制 

background-color 属性 指定 元 素 的 背景 颜色 。 定 义 整 个 页 面 的 背景 颜色 需要 在 body 
选择 符 中 定义 。 

在 下 面 的 例子 中 ,hl、p 和 div 元素 都 有 各 自 的 背景 颜色 。 

例 3.17 设置 背景 色 。 


<html> 
<head> 
< style type = "text/css"> 
= 
h1 {background - color: orange} 
p{ background - color: rgb( 224, 255,255) } 
div{ background - color: # b0c4de} 
--> 
</style> 
</head > 
< body> 
< h1 > Background - color of heading 1 </h1 > 
<div> 
<br /><br /><br /> 
This is a text inside a div element. 
<p>This paragraph has its own background color.</p> 
This text is still in the div element. 
<br /><br /><br /> 
</div> 
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</body> 
</html > 


例 3. 17 在 浏览 器 中 的 显示 效果 如 图 3. 10 所 示 。 


GO- E) DAExample\Example3- “| 好 | x ||P a227 
i A) RRO ESV 收藏 夫 (A) IAM FHH 
oe wom 


This paragraph has its own background color. 


图 3.10 background-color 属性 


2. 背景 图 片 


属性 : background-image 

值 : url( 图 片 文件 名 称 ) 

background-image 属性 用 来 指定 一 张 图 片 作为 一 个 元 素 的 背景 。 默 认 情 况 下 ,图 片 会 
不 断 重复 以 铺 满 整个 元 素 。 

整个 页 面 的 背景 图 片 可 以 这 样 设置 ,如 下 。 

例 3.18 设置 背景 图 片 。 


<html> 
<head> 
< style type = "text/css"> 
i 
body {background — image:url(wallpaperl. gif) } 
--> 
</style> 
</head> 
< body> 
<hl >Hello, World</h1 > 
</body> 
</html> 


例 3.18 在 浏览 器 中 的 显示 效果 如 图 3. 11 所 示 。 
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图 3. 11 background-image 属性 设置 背景 图 片 


3. 背景 重复 


属性 : background-repeat 

值 : repeat (默认 ) | repeat-x | repeat-y | no-repeat 

默认 情况 下 ,background-image 属性 会 同时 横向 和 纵向 重复 ,如 例 3. 18。 有 些 图 片 仅 
仅 需 要 横向 或 纵向 重复 ,或 者 根本 不 需要 重复 。 下 面 的 代码 表示 图 片 leaf. jpg 在 浏览 器 窗 
口中 只 出 现 一 次 不 重复 : 


body 

f 

background - image: url (leaf. jpg); 
background - repeat :no - repeat; 

} 


4. 背景 附着 


属性 : background-attachment 

值 : scroll (默认 ) | fixed 

background-attachment 属性 用 来 设置 当下 拉 页 面 时 背景 图 片 是 固定 或 者 滚动 。 
例 3.19 设置 背景 图 片 不 滚动 不 重复 。 


<html> 
<head> 
<style type = "text/css"> 
Ss 
body 
{ 
background - image: url (leaf. jpg); 
background - repeat :no - repeat; 
background - attachment : fixed 
} 
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一 一 > 

</style> 

</head> 

< body> 
< h2> Chapter 1 </h2 > 
<p>This chapter discusses...</p> 
<br /><br /><br />< br /><br /> 
<h2 > Chapter 2 </h2 > 
<p>This chapter discusses...</p> 
<br /><br /><br /><br /><br /> 
<h2 > Chapter 3 </h2 > 
<p>This chapter discusses...</p> 
<br /><br /><br /><br /><br /> 
<h2> Chapter 4</h2 > 
<p> This chapter discusses...</p> 
<br /><br /><br /><br /><br /> 
<h2> Chapter 5 </h2 > 
<p> This chapter discusses...</p> 
<br /><br /><br /><br /><br /> 
< h2 > Chapter 6 </h2 > 
<p> This chapter discusses...</p> 
<br /><br /><br /><br /><br /> 

</body > 

</html> 


例 3. 19 在 浏览 器 中 的 显示 效果 如 图 3. 12 所 示 。 
| 


gO- [E] DAExemple\Example3-19.hml EE 
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Chapter 1 


This chapter discusses... 


Chapter 2 


This chapter discusses... 


Chapter 3 


This chapter discusses... 


3.12 背景 图 片 不 滚动 不 重复 
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试 着 滚动 例 3. 19 中 的 网 页 ,然后 把 第 9 行 的 属性 值 fixed 改 为 scroll, 然 后 保存 文件 , 刷 
新 页 面 , 再 次 滚动 页 面 ,改动 后 的 网 页 将 看 起 来 很 怪异 。 


5. 背景 定位 


属性 : background-position 

值 : xpos ypos | x% y% | top left | top right | bottom left | … 

background-position 属性 指定 背景 图 片 的 起 始 位 置 。 例 3. 19 中 的 样式 表 可 以 增加 一 
个 background-position 属性 如 下 。 

例 3.20 改变 图 片 默 认定 位 。 

body 

{ 

background — image:url(leaf. jpg); 

background - repeat :no - repeat; 

background — attachment : fixed; 

background — position: 20px 50px 

j 


当 应 用 例 3. 20 时 ,网 页 会 看 起 来 稍微 有 些 奇 怪 。 
6. 背景 简写 属性 


属性 : background 

fÉ (Fk Iii JF): background-color background-image background-repeat background- 
attachment background-position 

如 前 面 学 习 过 的 字体 属性 一 样 ,背景 属性 也 可 以 使 用 简写 办 法 在 一 个 声明 中 设置 所 有 
属性 。 即 使 有 一 个 或 几 个 属性 值 没有 给 出 也 可 以 ,只 要 有 属性 值 的 按 上 述 顺序 排列 就 可 以 。 
例 3. 20 可 以 简写 为 : 


body{ background: url(leaf. jpg) no - repeat fixed 20px 50px} 


ER: 有 了 背景 属性 ,设计 者 可 以 充分 发 挥 自己 的 才能 ,把 网 页 设计 得 华美 绚丽 。 不 过 
需要 提醒 读者 注意 的 是 ,背景 属性 毕 竞 是 背景 , 它 是 为 前 景 的 内 容 ( 文 字 、 图 片 等 ) 服 务 的 ,所 
以 不 要 喧 宾 村主 ,影响 网 站 读者 对 内 容 的 获取 。 如 果 是 设置 图 片 背景 ,首先 要 考虑 的 是 小 图 
片 ,由 其 水 平 及 垂直 方向 重复 ,获得 一 个 较 好 的 背景 图 案 , 比 如 例 3. 18; 对 类 似 例 3. 19 的 大 
图 片 背景 使 用 要 慎重 ,因为 大 图 片 文件 大 ,会 占用 较 多 的 带宽 资源 ,导致 网 页 下 载 速度 慢 。 
另外 要 注意 的 是 ,网 页 内 容 总 是 在 背景 前 部 的 ,所 以 如 果 图 片 本 身 是 网 页 的 内 容 ,要 使 用 
HTML ¥ <img> ##SARMARH ,要 使 背景 图 片 与 内 容 图 片 有 所 区 别 。 


3.4.4 CSS 边框 
CSS 边框 属性 定义 元 素 周围 的 边框 。 
1. 边框 样式 


属性 : border-style 
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值 : none | dotted | dashed | solid | double | groove | ridge | inset | outset 
border-style 属性 用 来 设置 边框 的 样式 ,默认 情况 下 ,边框 的 属性 值 是 不 显示 (Cnone) 。 
例 3.21 不 同 的 边框 样式 。 


<html > 
<head > 
<style type = "text/css"> 
<a a 
p. dotted {border - style: dotted} 
p. double {border - style: double} 
p. inset {border - style: inset} 
p. outset {border - style:outset} 
一 一 > 
</style> 
</head> 
<body> 
<p class = "dotted"> A dotted border. </p> 
<p class = "double"> A double border. </p> 
<p class = "inset">An inset border.</p> 
<p class = "outset"> An outset border.</p> 
</body > 
</html> 


例 3. 21 在 浏览 器 中 的 显示 效果 如 图 3. 13 所 示 。 


@ DAExample\Example3-21.html - Windows Internet Explorer EE 
L- [E] DAExample\Examph ~| ++] X | [P amex 2 | 
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“A dotted border, . 


| double border. 


Jan inset border. 
An outset border. | 


图 3.13 不 同 的 边框 样式 


2. 边框 宽度 


属性 : border-width 

值 : medium (默认 ) | thin | thick | 长 度 ( mm、px、em 等 ) 

border-width 属性 设置 了 边框 的 宽度 。 在 设置 border-width 属性 时 需要 先 设置 
border-style 属性 。 可 以 这 样 使 用 : 


.borderl {border - style:solid; border — width:1em;} 


第 3 章 Css 


3. 边框 颜色 


属性 : border-color 
值 : 颜色 名 称 | RGB | 十 六 进 制 
border-color 属性 用 来 设置 边框 的 颜色 。 可 以 这 样 使 用 : 


. redborder {border - style:dashed; border - color: red; } 
. blueborder{ border — style: dashed; border - color :RGB(0, 0,255); } 


4. 边框 简写 属性 


属性 : border 

值 ( 按 顺序 ): border-width border-style border-color 

在 设置 边框 时 有 许多 属性 需要 定义 ,为 了 简化 代码 ,也 可 以 在 一 个 属性 里 定义 所 有 的 边 
框 属性 。 可 以 这 样 使 用 : 


.redborder {border: lem dashed red} 


提示 : 在 边框 的 众多 属性 中 ,border-style 属性 是 必须 设 定 的 ,如 果 这 个 属性 没有 设 定 ， 
其 他 的 属性 设 定 都 没有 意义 。 另 外 ,本 小 节 的 例子 是 设 定 元 素 四 周 的 边框 为 相同 的 属性 、 粗 
MARE ,边框 还 可 以 分 别 设 定 上 \ 下 \ 左 \ 右 边框 为 不 同 的 风格 .粗细 和 颜色 , 若 想 深入 了 
解 ,可 以 参阅 CSS 详细 资料 。 


3.4.5 CSS 外边 距 


CSS 外 边 距 属性 定义 了 元 素 周围 的 空间 。 外 边 距 属性 声明 一 个 HTML 元 素 和 它 周围 
元 素 之 间 的 边 距 , 它 可 以 分 别 对 元 素 的 上 、 下 、 左 、 右 的 边 距 进 行 设置 。 


1. 外 边 距 一 一 单个 边 距 


属性 : margin-left、margin-right、margin-top、margin-bottom 

fi: % | 长 度 (in, mm, px, em, 等 ) | auto 

当 外 边 距 (margin) 的 属性 不 是 auto 时 ,浏览 器 就 会 设置 元 素 的 边 距 ,显示 的 效果 视 浏 
览 器 而 定 。 可 以 这 样 使 用 ， 

.marginl 

{ 

margin — top: 10px; 

margin — bottom: 10px; 

margin — right: 30px; 

margin — left: 30px; 

} 


2. 外 边 距 一 一 简写 属性 
属性 : margin 
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值 ( 按 顺序 ) : margin-top margin-right margin-bottom margin-left 
元 素 的 所 有 外 边 距 也 可 以 在 一 个 属性 里 简写 定义 ,如 果 4 个 属性 值 都 被 定义 ,那么 顺序 
是 : top( 上 )、right( 右 ) \bottom( F) \left( 左 ) ,例如 : 


-marginl {margin: 10px 30px 10px 30px} 

如 果 只 定义 一 个 值 , 那 么 它 将 设置 所 有 的 外 边 距 , 例 如 : 

-marginl {margin: 10px } 

如 果 只 定义 两 个 或 三 个 值 , 没 有 定义 的 外 边 距 将 采用 对 边 的 外 边 距 ,例如 : 


.marginl {margin: 10px 30px } /* 定义 两 个 值 */ 
.margin2 {margin: 10px 30px 10px} /* 定义 三 个 值 */ 


例 3.22 不 同 设置 的 外 边 距 。 


<html> 
<head> 
<title> Example of CSS border and margin </title> 
<style type = "text/css"> 
<!-- 
.dl{border:2px solid + ££0000} 
.d2{ border : 2px solid gray} 
-d3{margin:10px 30px; border: 2px solid gray} 
--> 
</style> 
</head > 
< body> 
<div class = "d1"> 
< div class = "d2"> No margin declared </div > 
</div><br /><br />< br /> 
<div class = "d1"> 
<div class = "d3"> Two margin values are declared </div> 
</div> 
</body > 
</html> 


例 3. 22 在 浏览 器 中 的 显示 效果 如 图 3. 14 所 示 。 注 意 在 两 种 情况 下 ,内 部 灰色 边框 
(2px solid gray) 和 外 部 红色 边框 (2px solid red) 之 间 的 外 边 距 。 

提示 : 外 边 距 是 排版 常用 的 概念 ,在 字 处 理 软件 中 ,也 有 页 边 距 的 概念 。 在 网 页 中 ,一 
个 元 素 和 另外 一 个 元 素 之 间 有 上 、 下 、 左 、 右 四 个 外 边 距 ,这 四 个 外 边 距 的 设置 可 以 通过 四 个 
单独 的 外 边 距 属性 设置 ,但 从 上 边 的 讨论 中 可 以 看 出 ,这 种 设置 办 法 书写 麻烦 ,用 快捷 外 边 
距 属 性 margin 即 可 一 次 完成 四 个 外 边 距 的 定义 。 从 margin 的 使 用 讨论 中 可 知 , 如 果 四 个 
外 边 距 值 相同 ,给 出 一 个 值 即 可 ; 如 果 上 下 人 外边 距 相 同 , 左 右 外 边 距 相同 ,设置 两 个 值 即 可 ; 
如 果 设 置 的 是 不 对 称 的 外 边 距 , 就 需要 设置 三 个 以 上 的 值 。 

例 3.22 通过 外 部 的 红色 边框 和 内 部 的 灰色 边框 ,说 明了 不 定义 外 边 距 和 定义 外 边 距 的 
Bal. 
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Ú Bk Æ Example of CSS border and margin 


No margin declared 


Two margin values are declared 


图 3.14 边框 和 外 边 距 示例 


3.4.6 CSS 内 边 距 
CSS 内 边 距 定义 的 是 一 个 HTML 元 素 边框 和 它 里 面 内 容 之 间 的 距离 。 除 了 内 边 距 属 


性 值 中 没有 auto, 许 多 外 边 距 的 规则 也 同样 适用 于 内 边 距 。 


1. 内 边 距 一 一 单个 边 距 


属性 : padding-left. padding-right, padding-top, padding-bottom 
fi: % | 长 度 (in、mm、px、em 等 ) 

可 以 为 不 同 的 边 设置 不 同 的 内 边 距 , 如 下 所 示 : 

. paddingl 

{ 

padding - top:10px; 

padding - bottom: 10px; 

padding - right :30px; 

padding - left: 30px; 

} 


2. 内 边 距 一 一 简写 属性 
属性 : padding 


值 ( 按 顺序 ) : padding-top padding-right padding-bottom padding-left 
元 素 的 所 有 内 边 距 也 可 以 在 一 个 属性 里 定义 ,如 果 4 个 属性 值 都 被 定义 ,那么 顺序 是 : 


top( 上 ) right (H) bottom( 下 ) left( 左 ) ,例如 : 


.paddingl {padding: 10px 30px 10px 30px} 
如 果 只 定义 一 个 值 ,那么 它 将 设置 所 有 的 内 边 距 ,例如 : 
.paddingl {padding: 10px } 


如 果 只 定义 两 个 或 三 个 值 ,没有 定义 的 内 边 距 将 采用 对 边 的 内 边 距 , 例 如 : 
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.paddingl {padding: 10px 30px } / * 定义 两 个 值 * / 
.padding2 {padding: 10px 30px 10px} /x 定义 三 个 值 * / 


下 面 的 例子 显示 了 外 边 距 和 内 边 距 之 间 的 不 同 。 
例 3.23 外 边 距 与 内 边 距 的 分 别 。 


<html> 
<head> 
<title>Difference of margin and padding </title> 
<style type = "text/css"> 
ee 
.d1{border:2px solid # ff0000} 
. d2{ border : 2px solid gray} 
.d3{margin:10px 30px; border: 2px solid gray} 
.pl{padding:10px 30px} 
=--> 
</style> 
</head> 
< body> 
<div class = "d1"> 
<div class = "d2 pl"> No margin declared. Two padding values are declared. </div > 
</div><br /><br /><br /> 
<div class = "d1"> 
<div class = "d3"> Two margin values are declared. No padding declared. </div> 
</div><br /><br /> 
<div class = "dl"> 
<div class = "d3 p1"> Two margin values and two padding values are declared. </div> 
</div> 
</body > 
</html> 


例 3. 23 在 浏览 器 中 的 显示 效果 如 图 3. 15 所 示 。 


©} Difference of margin and padding - Windows Internet Explorer o |e% 
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ve me | Æ Difference of margin and padding 


Two margin values and two padding values are 
declared. 


图 3.15 外 边 距 和 内 边 距 之 间 的 不 同 
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提示 : 内 边 距 属性 (padding) 与 外 边 距 属性 (margin) 这 两 种 属性 在 使 用 时 十 分 相似 ,但 
应 用 时 也 十 分 容易 混淆 。 因 此 以 例 3.23 来 说 明 这 种 区 别 : 这 里 首先 引用 了 边框 ,因为 边框 
实际 就 是 元 素 的 边界 的 显 性 显示 ,例子 中 以 灰色 边框 作为 文字 内 容 的 边界 。 内 边 距 属性 是 
用 来 设置 元 素 内 容 到 元 素 边界 的 距离 ,所 以 从 图 3. 15 中 间 的 边框 示意 可 以 看 到 没有 声明 内 
边 距 时 ,灰色 边框 是 紧 贴 着 里 边 的 文字 ( 即 内 容 ), 最 上 边 和 最 下 边 的 两 个 边框 都 是 声明 了 内 
边 距 的 情况 ,文字 (内 容 ) 和 灰色 边框 之 间 就 存在 内 边 距 ; 外 边 距 属 性 是 用 来 设置 一 个 元 素 
所 占 空间 的 边缘 到 相 邻 元 素 之 间 的 距离 ,图 3.15 最 上 边 的 灰色 边框 与 红色 边框 是 没有 声明 
外 边 距 的 情况 ,而 中 间 和 下 边 的 两 个 是 声明 外 边 距 的 情况 。 

为 了 更 详细 地 理解 ,可 以 参见 3. 4.7 节 “CSS SRA”, 


3.4.7 CSS 盒 模 型 


网 页 设计 中 的 每 个 元 素 都 是 一 个 矩形 盒 。 在 CSS 中 ,进行 设计 和 布局 时 ,会 用 到 盒 模 
型 。CSS 盒 模 型 从 本 质 上 来 说 是 环绕 在 HTML 元 素 周 围 的 方 框 , 它 由 外 边 距 .边框 .内 边 
距 和 实际 内 容 组 成 。 

盒 模 型 允许 放置 元 素 周围 的 边框 及 周围 相关 元 素 ， Boundary of content container 
图 3.16 闹 释 了 仿 模 型 。 rc----- 十 ------ ~ 

H T fie HE rA K D ae P TE CAT 
(width) 和 高 (height) ,需要 了 解 盒 模型 的 工作 原理 。 当 Height 
一 个 元 素 的 宽 和 高 被 CSS 定义 后 , 它 设 置 的 仅仅 是 内 容 
区 域 的 宽度 和 高 度 。 元 素 ( 盒 ) 的 总 宽度 还 包括 内 边 距 
(padding) ,边框 (border) 和 外 边 距 (margin), 如 下 例子 中 下 


= Margin Padding 
元 素 的 总 宽度 为 300px。 Border 


.element1 图 3. 16 CSS 盒 模型 


{ 
width: 250px; 


padding: 10px; 
border: 5px solid gray; 
margin: 10px; 


j 


计算 过 程 如 下 : 

250px( 宽 度 ) 十 20px( 左 右 内 边 距 ) 十 10px( 左 右边 框 ) 十 20px( 左 右 外 边 距 ) 王 300px 
元 素 ( 盒 模型 ) 的 总 宽度 与 总 高 度 应 当 这 样 计算 : 

盒 的 总 宽度 = width + padding-left + padding-right + border - left + border - right + 
margin- left + margin- right 

盒 的 总 高 度 = height + padding- top + padding-bottom + border - top + border - bottom + 
margin-top + margin - bottom 


图 3.17 RET GRMN EKER. 
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CSS Box Model Hierachy 


图 3.17 CSS 盒 模 型 层次 


例 3.24 盒 模型 中 各 个 属性 概念 。 


<!DOCTYPE html PUBLIC " — //W3C//DTD HTML 1.0 Transitional//EN" 
"http://www. w3. org/TR/HTML1/DTD/HTML1 - transitional. dtd"> 
<html> 
<head> 
<title> Example of Box Model </title> 
< style type = "text/css"> 
<== 
. boxmodel 
{ 
width: 280px; 
height: 280px; 
background - image: url(puppy. jpg); 
} 
--> 
</style> 
</head > 
< body > 
<p class = "boxmodel">This is the content of a paragraph. The width of the paragraph has 
been defined. </p> 
</body > 
</html> 


例 3. 24 在 浏览 器 中 的 显示 效果 如 图 3. 18 所 示 。 
下 面 开 始 为 例 3. 24 添加 不 同 的 盒 模型 元 素 。 
设置 内 边 距 (padding) 为 20px, 如 下 : 


.boxmodel 


{ 

width: 280px; 

height: 280px; 

background — image: url( puppy. jpg) ; 
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padding: 20px; 
} 


修改 后 的 例 3. 24 在 浏览 器 中 显示 效果 如 图 3. 19 所 示 。 


e th of the paragraph has be: 


ent o: ie | 
of the paragraph has 


图 3.18 一 个 有 背景 图 片 的 段落 图 3.19 有 20px 内 边 距 的 段落 
设置 边框 为 20px, 灰 色 , 如 下 : 
. boxmodel 


{ 

width: 280px; 

height: 280px; 

background - image: url(puppy. jpg); 
border: solid gray 20px; 

} 


本 次 修改 后 的 例 3. 24 在 浏览 器 中 显示 效果 如 图 3. 20 所 示 。 


图 3.20 有 20px 灰色 边框 的 段落 
设置 外 边 距 为 20px ,如 下 : 


. boxmodel 

{ 

width: 280px; 
height: 280px; 
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background — image: url( puppy. jpg) ; 
margin: 20px; 
l 


本 次 修改 后 的 例 3. 24 在 浏览 器 中 显示 效果 如 图 3. 21 所 示 。 


ent o iin | 
of the paragraph has 
‘ined, 


图 3.21 有 20px 外 边 距 的 段落 


说 明 : 图 3. 22 的 20px 外 边 距 ,由 于 周围 没有 其 他 元 素 ,图 片 中 无 法 看 出 效果 。 对 比 
图 3.23 中 的 20px 外 边 距 ,灰色 边框 与 浏览 器 上 、 左 边界 之 间 有 距离 ,空白 距离 就 是 外 边 距 。 
设置 所 有 的 盒 模型 元 素 如 下 : 


. boxmodel 

{ 

width: 280px; 

height: 280px; 

background - image: url( puppy. jpg); 

margin: 20px; padding: 20px; border: solid gray 20px; 
} 


HA ,修改 后 的 例 3. 24 在 浏览 器 中 的 显示 效果 如 图 3. 22 所 示 。 


Ø Example of Box Model - Windows Internet Explorer [o 6 || 2 | 
GO [E oresample\exam =] 4] x |/P ARRE pr 


AF SE) SEV GEA) ILAT) SAH 


ve WE Æ Example of Box Model ta 


s the content of a paragra 
width of the paragraph has beer 


图 3.22 加 入 了 所 有 盒 模型 元 素 
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在 沃克 俱乐部 主页 (index. html) PHAM AAR McK. MW PIAA 3.3 和 项 目 3. 4 
所 示 。 
项 目 3.3 CSS Kf layout. ess. 


body 

í 

background — color: rgb( 0, 204, 153); 
font — size:medium; 

font - family: K(f; 

margin:0; 

} 

hl, h3{ font - family: Mh; } 

h1{font — size:200 % ;color: red; } 
h3{ font — size:120 % ;color:green} 


div. content{ text — indent:1.5em} /* 设 定 首 行 缩 进 * / 
.center{ text — align:center} /* 设 定 文本 居中 对 齐 / 
hr{width:80 % } /* 设 定 横 线 x / 


/* 定义 网 页 页 头 id, 并 放 入 背景 图 片 * / 

# header 

{ 

/ * 背景 图 片 banner. jpg 宽 800px, 高 224px * / 
width: 800px; 

height :224px; 

margin:0 auto; 

background - image: url( images/banner. jpg) ; 
} 


/* 定义 网 页 正文 内 容 容 器 ,在 网 页 中 只 引用 一 次 * / 

# container 

{ 

/* 本 容器 上 外 边 距 设 定 为 0, 和 上 部 图 片 有 紧密 结合 ,按照 盒 模型 概念 , 这 里 定义 的 元 素 宽度 、 外 边 
距 和 内 边 距 合计 宽度 为 800px, 高 度 不 进行 定义 ,由 正文 内 容 自 动 生成 */ 

width:784px; 

margin:0 auto; 

padding:8px; 

background - color:rgb(187, 224, 227); 


/ * 定义 网 页 页 脚 id*/ 

# footer{ 

width: 784px; 

margin:0 auto; 

padding: 8px; 

background — color: rgb( 187,224,227) ; 
} 


MA 3.4 主页 文件 index. html, 


<! DOCTYPE html PUBLIC " - //W3C//DTD HTML 1.0 Transitional//EN" "http://www. w3. org/TR/HTML1/ 
DTD/HTML1 ~ transitional. dtd"> 
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<html> 
< head xmlns = "http://www. w3.org/1999/HTML"> 
<meta http - equiv = "Content - Type” content = "text/html; charset = gb2312" /> 
<title> 沃 克 俱乐部 欢迎 您 </title> 
<! —— 链接 外 部 样式 表 文 件 layout. css --> 
< link rel = "stylesheet" type = "text/css" href = "layout. css" /> 
</head> 
< body> 
<div id = "header" class = "center"> <! -- 调用 页 头 id 及 居中 类 --> 
</div> 
<div 这 = "container"> <! -- 调 用 正文 容器 id--> 
<div class = "center"> <! -- 调用 文本 居中 对 齐 类 --> 
<p> 
<a href = "introduction/articlel. html" target = "blank"> 健 走 的 方法 </a> &nbsp; 
&nbsp; &nbsp; 
<a href = "introduction/article2. html" target = "_blank">f#t jE 4# </a> S&nbsp; 
&nbsp; &nbsp; 
<a href = "activity/activityl. html" target = "_blank"> 俱 乐 部 活动 </a> 
</p> 
</div> 
<h3 > 走路 ,简单 有 效 的 健身 之 道 </h3 > 
<div class = "content"> <! -- 调用 首 行 缩 进 类 --> 
<p> 走 路 是 人 类 本 能 的 身体 活动 ,人 类 身体 结构 就 是 为 步行 设计 的 。 问 题 是 , 随 着 汽车 等 代 
步 工 具 的 普及 ,人 们 "好 和 逸 恶 劳 "的 条 件 和 理由 越 来 越 充足 , 以致 基本 的 走路 功能 都 有 些 退 化 了 。 根 据 
美国 疾病 控制 与 预防 中 心 的 研究 ,有 高 达 75 % 的 美国 人 每 天 运动 量 不 到 30 分 钟 ,大 部 分 人 几乎 成 天 
坐 在 椅子 上 ,是 不 折 不 扣 的 "沙发 土豆 "。 反 观 我 们 中 国 的 现实 情形 , 随 着 经 济 的 发 展 ,汽车 的 大 量 使 
用 及 其 他 因素 ,导致 缺乏 锻炼 .体形 肥胖 的 人 越 来 越 多 。</p> 
<p> 走 路 健身 又 健 脑 。 我国 自古 就 有 " 走 为 百 练 之 祖 "的 健身 经 验 谈 ,其 中 传统 医学 认为 , 双 
脚 是 人 体 的 健康 之 根 。 走 路 刺激 脚底 穴位 ,能 每 筋 通 络 , 活 血 顺 气 ,强身 健 体 。 同 时 ,现代 运动 医学 研 
究 也 证 实 : 走路 时 ,骨髓 、 肌 肉 A ,神经 末梢 都 要 参加 运动 , 从 而 促进 血液 循环 ,调节 大 脑 皮 层 的 活 
动 功 能 ,促使 身体 各 种 激素 分 泌 , 使 人 心情 愉悦 。 走 路 防 病 并 延缓 衰老 。 最 新 的 医学 研究 表明 ,一 周 
健步 走 7 小 时 以 上 ,可 以 降低 20% 乳腺 癌 、30% 心脏 病 和 50% 糖尿病 的 雏 患 率 ,而 中 老年 人 每 天 散步 
2.4 公里 以 上 ,心脏 病 发 作 率 将 降低 50% </p> 


</div> 

</div> 

<div id = "footer" class = "center"> <! -- 调用 页 脚 id 及 居中 类 --> 
<hr /> 


<p><a href = "mailto: webmaster @ walkerclub. net"> 和 我 联系 Email: webmaster @ 
walkerclub. net </a></p> 
</div> 
</body > 
</html> 
项 目 3.4 在 浏览 器 中 的 显示 效果 如 图 3. 23 所 示 。 
提示 : 在 学 习 了 CSS 的 边框 ,外 边 距 、 内 边 距 等 属性 之 后 ,学 习 侈 模型 是 对 这 些 属 性 的 
汇总 。 只 有 了 解 盒 模型 , 才 可 以 综合 应 用 这 个 概念 进行 网 页 的 设计 。 本 小 节 的 项 目 3.3 和 
项 目 3.4 对 这 使 模型 的 概念 做 了 一 个 应 用 ,这 种 设计 已 经 接近 于 实际 应 用 的 网 页 。 在 熟练 
掌握 这 些 概 念 之 后 ,可 以 尝试 在 正文 内 容 容 器 (layout. css 中 的 并 container) 之 内 再 定义 容 
器 即 金 模型 ,添加 其 他 内 容 , 或 者 对 网 页 顶部 图 片 进行 处 理 ( 比 如 加 入 文字 、 制 作 公司 logo, 


Æ 天 充 候 和 部 欢迎 怎 - Windows Internet Explorer fo elie) 
we a DAExample\Project\index.html [4 |x||P Be 


ee EC 拓 克 俱 乐 部 欢迎 您 


ANERE 三 欢 通 光 怖 关 壳 候 乐 部 


走路 ， 简 单 有 效 的 健身 之 道 


ie ra en h 
Ke RENIN PERAEREDETSSOAT, RBS VLERELEOEL, TRIN VALE”. 
ERG RORAAY, ARERR, AOAC LEMAR, SIRENE. 体形 肥胖 的 人 越 来 起 


eee Ua ee ea Bee 其 中 传统 医学 认为 ， 双 脚 是 人 体 的 健康 之 
根 。 走 路 刺激 脚底 穴位 ， 能 舒 筋 通 络 ， 活 血 顺 气 ， 强 身 健 体 。 同 时 ， 现 代 运 动 医学 研究 也 证 实 ， 走 路 时 ， 骨 骼 、 
肌肉 、 韧带 、 RE RWES ED. 从 而 促进 血液 循环 ， bel ga 促使 身体 各 种 激素 分 演 ， 
使 人 心情 愉悦 。 走 路 防 病 并 延 组 衰 吉 。 最 新 的 医学 研究 表明 ， 一 周 健步 走 ?小 时 以 上 ， OS FURIE 
30% AEAF K AR ANEEE, MASE ABS ARES AELE, LA RIE RHESO% 。 


图 3.23 应 用 了 CSS 属性 的 主页 
制作 成 动画 文件 等 ) ,可 以 使 网 页 逐步 完美 。 
3.4.8 CSS 伪 类 


伪 类 与 类 相似 ,但 不 是 真正 的 类 , 伪 类 用 来 增加 一 些 特殊 效果 。 
伪 类 语法 : 

selector: pseudo ~ class {property: value} 

伪 类 以 冒号 (:) 开 始 , 可 以 这 样 使 用 : 

a: Link{color: red} 


链接 (二 a 二 标签 ) 伪 类 是 最 常见 的 伪 类 。 有 4 种 链接 伪 类 如 下 : 
:link 指定 未 访问 的 链接 样式 。 
:visited 指定 已 经 访问 过 的 链接 样式 。 
:hover 指定 当 鼠 标 悬 浮 时 的 链接 样式 。 
:active 指定 当 被 单 击 时 的 链接 样式 。 
例 3.25 设 定 链接 样式 。 


<html> 


<head> 
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<style type = "text/css"> 


<> 


a:link {color:red} /* 未 访问 时 * / 
a:visited {color:green} /* 已 访问 过 * / 
a:hover {color:orange} /* 鼠标 悬 停 时 * / 
a:active {color:blue} /* 鼠标 点 中 时 * / 
--> 
</style> 
</head > 
< body> 


<p><a href = "Example3. 24. html" target="_blank"> This is a link specified anchor pseudo 
- classes. </a ></p> 
</body> 
</html> 


在 浏览 器 中 证 实 以 上 例子 中 链接 在 鼠标 悬浮 和 单 击 时 的 颜色 。 

注意 ; 在 CSS 定 义 时 ,a:hover 必须 跟 在 a:link 和 a:visited 之 后 ,a:active 必须 跟 在 a: 
hover 之 后 。 

ER: 伪 类 和 类 相似 ,但 不 是 真正 的 类 。 从 本 小 节 中 的 语法 上 可 以 看 出 相似 度 很 大 。 
伪 类 可 以 实现 类 所 实现 不 了 的 一 些 特效 。W3C 制订 的 CSS 标准 ,从 CSS1 到 CSS2 和 
CSS3 ,一 直 在 不 断 地 添加 一 些 新 的 伪 类 ,以 丰富 CSS 的 表现 能 力 ,只 是 这 些 新 添加 的 许多 伪 
类 尚未 被 多 数 主流 浏览 器 所 支持 ,所 以 应 用 不 多 。 伪 类 是 CSS 的 一 个 发 展 方向 ,可 以 多 加 
关注 ,但 要 注意 的 是 使 用 的 伪 类 要 被 所 有 的 主流 浏览 器 支持 ,否则 会 影响 使 用 。 

本 小 节 所 述 的 链接 伪 类 ,已 经 被 所 有 主流 浏览 器 所 支持 ,可 以 放心 使 用 。 

要 看 到 例 3. 25 中 链接 中 四 种 不 同情 况 下 的 四 种 颜色 ,要 注意 在 浏览 器 中 清除 历史 记 
录 , 这 样 首先 保证 未 访问 链接 (a:link) 的 颜色 可 以 正常 显示 , 悬浮 (a:hover) 和 单 击 (a: 
active) 两 个 颜色 不 会 有 问题 ,对 访问 过 的 链接 ,必须 保证 链接 是 一 个 真实 链接 而 非 空 链接 ， 
这 样 访问 过 的 链接 (asvisited) 会 被 记录 到 浏览 器 中 ,这 样 已 访问 链接 颜色 才 可 以 正确 显示 。 


6.5 CSS3 


CSS3 是 层 倒 样式 表 的 最 新 标准 。CSS3 基于 目前 使 用 的 CSS2 标准 的 基础 上 ,添加 了 
新 的 特性 。 

使 用 CSS3 ,可 以 使 得 设计 人 员 只 用 样式 表 的 办 法 就 可 以 对 网 页 元 素 完成 高 级 的 样式 设 
计 。 比 如 在 CSS2 中 ,元 素 边框 是 方形 样式 ,如 果 要 设计 成 为 圆 角 样式 ,必须 借助 图 片 的 方 
式 进行 复杂 而 繁琐 的 处 理 才 能 够 完成 。 利 用 CSS3, 仅 需 简单 指定 边框 的 属性 ,就 可 以 完成 
圆 角 边框 的 设计 。 

由 于 CSS3 的 标准 仍然 在 制订 过 程 中 ,为 使 制订 过 程 简化 ,整个 CSS3 标准 被 分 为 一 个 
个 模块 ,每 个 模块 对 应 特定 的 设计 与 特性 。 如 颜色 模块 .选择 符 模 块 .字体 模块 .边框 模 
块 等 。 
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3.5.1 CSS3 边框 
1. 设置 圆 形 边框 


前 页 谈 到 ,使 用 CSS3 可 以 完成 圆 形 边框 的 设计 。 参 见 例 3.26. 
例 3.26 圆 形 边框 。 


<! DOCTYPE html > 

<html> 

< head > 

<style> 

div { 
border: 2px solid #alalal; 
padding: 10px 40px; 
background: # dddddd; 
width: 300px; 
border - radius: 25px; 

} 

</style> 

</head> 

< body > 

< div> The border - radius property create a rounded box. </div> 


</body> 
</html> 


效果 如 图 3. 24 所 示 。 


The border-radius property create a 
rounded box. 


图 3.24 CSS3 圆 形 边框 
圆 形 边框 语法 (border-radius) : 


border - radius:1 - 4 length value 

border - * - radius: length value 

说 明 : 边框 半径 值 可 以 选取 1 到 4 个 长 度 值 。 类 似 于 边框 (border) 的 取 值 方法 ,4 个 值 
按 顺 序 依 次 对 应 左上 角 、 右 上 角 、 右 下 角 和 左下 角 。 如 果 只 有 一 个 值 , 则 四 个 角 取 相同 值 ; 
如 果 只 有 两 个 值 , 则 说 明 是 左上 角 、 右 上 角 取 值 , 按 对 称 原则 , 右 下 角 的 值 与 左上 角 相 同 , 左 
下 角 的 值 与 右上 角 相 同 ; 如 果 取 三 个 值 ,没有 取 值 的 最 后 一 个 是 左下 角 , 其 值 与 右上 和 角 
相等 。 

如 : 

border - radius:25px 10px; 


实际 上 与 如 下 的 写法 有 相同 效果 : 


border — top- left - radius:25px; 
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border — top — right - radius: 10px; 
border — bottom — right — radius: 25px; 
border — bottom — left — radius:10px; 


2. 盒子 添加 阴影 


看 如 下 的 例子 。 
例 3.27 盒子 阴影 。 


<! DOCTYPE html > 
<html> 
< head > 
<style> 
div { 
width: 300px; 
height: 100px; 
background - color: yellow; 
box- shadow: 10px 10px 5px # 888888; 
} 
</style> 
</head> 
< body> 
<div></div> 
</body > 
</html> 


例 3. 27 在 浏览 器 产生 的 效果 如 图 3. 25 所 示 。 


图 3.25 带 阴影 的 盒子 


阴影 语法 : 

box - shadow: h- shadow v— shadow blur spread color 

说 明 : 

box-shadow 向 盒子 ( 框 ) 添 加 阴影 。 该 属性 是 由 逗号 分 隔 的 阴影 列表 ,每 个 阴影 由 2 一 
4 个 长 度 值 . 可 选 的 颜色 值 来 规定 。 


h-shadow: 必 需 。 水 平 阴 影 位 置 ,允许 负 值 ( 正 值 向 右 投影 , 负 值 向 左 投影 ) 。 
v-shadow: 必 需 。 垂 直 阴 影 位 置 ,允许 负 值 ( 正 值 向 下 投影 , 负 值 向 上 投影 ) 。 
blur: 可 选 。 模 糊 距 离 。 

spread: 可 选 。 阴 影 尺 寸 。 

color: 可 选 。 阴 影 颜 色 , 缺 省 为 黑色 。 

盒子 阴影 支持 IE9 及 以 上 版 本 ,Chrome,Firefox。 
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3.5.2 CSS3 渐变 


CSS3 渐变 可 以 显示 出 指定 两 种 或 多 种 颜色 的 平滑 过 渡 。 

在 CSS3 出 现 之 前 ,渐变 效果 是 通过 图 片 处 理 软 件 ( 如 Photoshop) 处 理 的 图 片 得 到 。 使 
用 CSS3 完成 渐变 ,用 户 可 以 减少 下 载 图 片 的 时 间 和 带宽 使 用 。 另 外 ,使 用 CSS3 完成 的 渐 
变 在 网 页 缩放 时 有 更 好 的 视觉 效果 ,因为 CSS3 生成 的 渐变 不 是 图 片 , 而 是 通过 浏览 器 
生成 。 

CSS3 定义 两 种 渐变 ， 

线性 渐变 (向 上 ,向 下 ,向 左 , 向 右 , 斜 向 ); 

径 向 渐变 ( 圆 形 ,椭圆 形 ) 。 


1. 线性 渐变 


首先 看 下 面 的 例子 。 
例 3.28 线性 渐变 效果 。 


<!DOCTYPE html > 
<html> 
<head> 
<style> 
# grad1 { 
height: 200px; 
width: 600px; 
background: linear - gradient(to right, red , blue); 
} 
# grad2 { 
height: 200px; 
width: 600px; 
background: linear - gradient(to bottom right, red, blue); 
} 
#9grad3 { 
height: 200px; 
width: 600px; 
background: linear - gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); 
} 
</style> 
</head> 
< body> 
< h3 > Linear Gradient </h3 > 
<p> This linear gradient starts at the left. It starts red, transitioning to blue:</p> 
<div id= "grad1"></div> 
<p> This linear gradient starts at the top left and goes to bottom right. It starts red, 
transitioning to blue:</p> 
<div id= "grad2"></div> 
< p> This linear gradient starts at the left. It use the rgba ( ) function to define 
transparency:</p> 
<div id= "grad3"></div> 
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<p>< strong> Note:</strong> IE10 +, Chrome 26+ and Firefox 16 + support gradients.</p> 
</body> 
</html> 


由 于 本 书 的 灰 度 图 像 无 法 准确 显示 出 色彩 的 渐变 效果 ,因此 ,本 例 不 进行 截图 显示 。 读 
者 可 以 使 用 IE10 以 上 版 本 ,或 者 最 新 的 Chrome, Firefox 直接 在 电脑 上 查看 本 例 的 渐变 效 
果 图 。 

创建 线性 渐变 ,必须 定义 至 少 两 种 颜色 , 即 起 始 颜色 与 结束 颜色 ,渐变 就 在 这 两 个 颜色 
之 间 平 滑 渐 变 。 渐 变 方向 可 以 设 定 。 

线性 渐变 语法 : 


background: linear - gradient(direction, color - stop1，color - stop2,...) 

说 明 : 

direction :线性 渐变 方向 ,to bottom (HF ) ,to top,to left,to right. 

color-stopl :起 始 颜色 。 

color-stop2: 结 束 颜 色 ( 如 果 有 第 3 个 颜色 , 它 又 是 下 一 个 线性 渐变 的 起 始 颜色 ) 。 

例 3. 28 中 的 选择 符 # gradl( 第 1 个 渐变 ) 显 示 了 从 左 向 右 的 渐变 ,以 红色 开始 ,渐变 到 
蓝 色 。 

例 3. 28 中 的 选择 符 # grad2( 第 2 个 渐变 ) 显 示 了 从 左上 角 向 右 下 角 的 渐变 ,以 红色 开 
始 , 渐 变 到 蓝 色 。 

CSS3 渐变 还 支持 透明 效果 , 即 产生 一 种 淡 入 淡出 的 效果 。 

完成 透明 效果 , 需 使 用 rgba() 函数 定 义 起 始 颜 色 。rgba() 函 数 的 最 后 一 个 参数 定义 了 
颜色 的 透明 度 , 取 值 范 围 从 0 到 1.0 是 全 透明 ,1 是 全 色 ( 不 透明 )。 

例 3. 28 中 的 选择 符 # grad3( 第 3 个 渐变 ) 显 示 了 从 左 向 右 的 透明 效果 ,以 透明 开始 ,到 
完全 的 红色 。 


2. 径 向 渐变 


首先 看 下 面 例 子 。 
例 3.29 径 向 渐变 效果 。 


<!DOCTYPE html > 
<html> 
<head> 
<style> 
# gradi { 
height: 150px; 
width: 200px; 
background: radial - gradient(red, yellow, blue); 
} 
# grad2 { 
height: 150px; 
width: 200px; 
background: radial - gradient(circle, red, yellow, blue); 


</style> 
</head> 
< body> 
< h3 > Radial Gradient - Shapes </h3 > 
<p> Ellipse (this is default) :</p> 
<div id= "gradi"></div> 
<p>Circle:</p> 
<div id= "grad2"></div> 
<p>< strong> Note:</strong>IE10 +, Chrome 26 + and Firefox 16+ support gradients.</p> 
</body> 
</html> 
由 于 本 书 的 灰 度 图 像 无 法 准确 显示 出 渐变 效果 ,因此 ,这 里 不 对 例 3. 29 运行 效果 截图 
显示 。 读 者 可 以 使 用 IE10 以 上 版 本 ,或 者 最 新 的 Chrome, Firefox 直接 在 电脑 上 查看 本 例 
的 渐变 效果 图 。 
径 向 渐变 需要 定义 一 个 圆心 点 。 然 后 定义 渐变 需要 的 至 少 两 种 颜色 ,形状 ( 圆 形 或 椭圆 
形 ) 及 尺寸 。 缺 省 情况 下 ,圆心 为 几何 中 心 ,形状 是 椭圆 ,尺寸 到 当前 元 素 的 最 远 端 。 
径 向 渐变 语法 : 


background: radial - gradient(center, shape size, start - color, ..., last - color) 


说 明 : Shape 参数 定义 形状 , 取 值 为 circle X ellipse ik 4 (A). 

例 3. 29 中 选择 符 寺 gradl( 第 一 个 渐变 效果 ) 无 shape 参数 ,因此 渐变 的 形状 为 缺 省 的 
椭圆 。 例 3. 29 中 选择 符 # grad2 (第 二 个 渐变 效果 ) 指 定 shape 参数 为 circle, 渐 变形 状 
为 圆 。 

ER: 渐变 有 许多 参数 与 使 用 方法 ,有 兴趣 的 读者 可 以 参考 CSS3 详细 用 法 与 技巧 。 


3.5.3 CSS3 文本 效果 


CSS3 在 文本 显示 效果 上 添加 了 一 些 新 的 特性 。 截 止 本 书 完 成 之 时 ,主流 浏览 器 对 多 
数 CSS3 文本 效果 属性 支持 情况 并 不 好 。 本 小 节 中 ,只 介绍 一 下 文本 效果 中 的 文本 阴影 属 
性 ,本 属性 被 主流 浏览 器 所 支持 。 

例 3.30 文本 阴影 效果 。 

<! DOCTYPE html > 


<html> 
<head> 


<style> 
hl { 
text — shadow: 5px 5px 5px # FF0000; 
} 
</style> 
</head> 
< body> 
< hl > Text - shadow effect!</hl > 
</body> 
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</html> 


例 3. 30 在 浏览 器 的 显示 效果 如 图 3. 26 所 示 。 
Text-shadow effect! 


图 3.26 文本 阴影 属性 
文本 阴影 属性 语法 : 
text — shadow: h- shadow v~ shadow blur color 
说 明 : 
h-shadow: 必 需 。 水 平 阴影 位 置 , 允 许 负 值 ( 正 值 向 右 投影 , 负 值 向 左 投影 ) 。 
vshadow: 必 需 。 垂 直 阴 影 位 置 ,允许 负 值 ( 正 值 向 下 投影 , 负 值 向 上 投影 ) 。 
blur: 可 选 。 模 糊 距离 。 
color: 可 选 。 阴 影 颜色 。 
IE9 及 以 下 版 本 不 支持 文本 阴影 属性 。 


小 结 


内 容 与 形式 分 离 是 当今 网 页 设计 的 思想 。 内 容 ,结构 由 HTML 负责 ,比如 标题 .段落 、 
图 片 链接 及 HTML5 新 引入 的 网 页 布局 元 素 等 ; 形式 、 外 观 由 CSS 负责 ,比如 字体 .背景 、 
边框 及 CSS3 引入 的 渐变 效果 等 。 使 用 时 两 者 结合 ,各 负 其 责 , 能 够 高 效率 地 设计 与 维护 网 
页 。 这 种 开发 方式 实际 上 就 是 当前 的 Web 设计 标准 DIV 十 CSS。 

本 章 自始至终 都 在 按 DIV + CSS 的 标准 进行 讲授 。 在 完成 本 章 的 学 习 之 后 ,第 2 章 
使 用 的 行内 样式 表 ( 也 称 内 联 样式 表 ) 不 再 推荐 使 用 ,内 部 样式 表 也 尽量 少 用 ,强烈 推荐 符合 
DIV 十 CSS 的 外 部 样式 表 完 成 网 页 的 设计 。 

本 章 最 后 部 分 简要 介绍 了 CSS 最 新 版 本 CSS3 一 些 特性 。 利 用 CSS3 属性 ,可 以 轻松 
完成 CSS 以 往 版 本 上 实现 起 来 非常 麻烦 .非常 高 级 的 设计 。 需 要 指出 的 是 ,虽然 CSS3 实现 
了 多 种 炫 酷 的 网 页 设计 效果 ,但 要 注意 浏览 器 对 CSS3 的 支持 情况 ,尤其 是 IE ,一 般 都 需要 
IE10 以 上 才 可 以 实现 CSS3 的 设计 效果 ,因此 ,在 使 用 CSS3 进行 设计 时 ,需要 加 入 对 老 版 
本 浏览 器 的 兼容 性 代码 。CSS3 仍然 在 发 展 中 ,本 书 只 是 对 CSS3 做 一 个 指导 性 的 介绍 ， 
CSS3 是 发 展 的 方向 ,读者 在 实际 设计 中 ,可 以 关注 CSS3 的 应 用 。 


习题 


1. CSS 利用 哪个 HTML 标签 进行 网 页 布局 ? 

A. <dir> B. <div> C. <dis> D. <dif> 
2. 下 列 哪 一 项 是 CSS 的 正确 语法 ? 

A. body. background-color = rgb(22,38,126); 

B. body: background-color = { rgb(22.38.126)}; 
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C. body{ background-color; rgb(22,38,126);} 

D. {body background-color = “rgb(22,38,126)”;} 

Wal 5 TAT A <3 > br Ei AS ABI 7 

A. .h3(color: green} B. h3{color: green} 

C. all h3{color: green} D. =h3{color; green} 

. 下 列 哪 一 个 是 HTML 文件 引用 外 部 样式 表 文 件 的 正确 语句 ? 

A. <style src=”layout. css”> 

B. <stylesheet>layout. css</stylesheet> 

C. <import @ layout. css></import> 

D. <link rel=”stylesheet” type=” text/css” href=”layout. css” /> 
.如 何 去 掉 超 链 接 默 认 的 下 划 线 ? 

.类 . element] 的 上 外 边 距 与 下 外 边 距 相同 ,都 是 20px, 左 外 边 距 与 右 外 边 距 相同 ,都 


是 5px。 使 用 外 边 距 的 简写 方式 ,如 果 完 成 ? 
7. 设计 一 个 搜索 文本 框 , 要 求 文本 框 为 一 个 圆 角 文本 框 ,需要 利用 CSS3 的 哪 一 个 属性 


jQuery 是 一 套 跨 浏览 器 的 、 轻 量 级 的 JavaScript 库 , 简 化 HTML 与 JavaScript 之 间 的 
操作 。 相 对 于 jQuery, JavaScript 语言 是 基础 ,jQuery 是 JavaScript 语言 众多 库 中 的 一 个 
(此 外 还 有 Prototype,Dojo, YUL, Ext JS 等 ); 但 无 疑 jQuery 是 JavaScript 语言 众多 库 中 最 
闪耀 的 一 个 ,如 没有 jQuery 的 锦上添花 ,JavaScript 语言 会 减 色 不 少 。 

jQuery 由 美国 人 John Resig 在 2006 年 1 月 上 发 布 第 一 个 版 本 , 目前 是 由 Dave 
Methvin 领导 的 开发 团队 进行 开发 ,是 目前 最 受 欢 迎 的 JavaScript 库 。jQuery 的 宗旨 
“write less，do more”( 写 的 更 少 ,做 的 更 多 ) 。 

jQuery 是 开源 软件 ,使 用 麻 省 理工 学 院 的 MIT 许可 证 授权 。jQuery 的 语法 设计 使 得 
许多 操作 变 得 容易 ,如 操作 文档 对 象 .选择 DOM 元 素 、 创 建 动画 效果 、 人 处 理事 件 以 及 开发 
Ajax 程序 。jQuery 也 提供 了 给 开发 人 员 在 其 上 创建 插件 的 能 力 。 这 使 开发 人 员 可 以 对 底 
层 交 互 与 动画 、 高 级 效果 和 高 级 主题 化 的 组 件 进行 抽象 化 。 模 块 化 的 方式 使 jQuery 函数 库 
能 够 创建 功能 强大 的 动态 网 页 以 及 网 络 应 用 程序 。 


4.1 JavaScript 基础 


JavaScript 语言 是 目前 Internet 上 最 流行 的 .最 重要 的 编程 语言 之 一 , 它 被 无 数 的 网 页 
用 作 改 进 设 计 、 验 证 表单 、 检 测 浏览 器 ,以 及 更 多 的 应 用 ,学 习 Web 技术 必须 学 会 JavaScript 
语言 。JavaScript 语言 可 以 使 页 面 更 加 生动 .灵活 ,可 以 用 极 小 的 程序 量 完成 需要 的 功能 。 
JavaScript 语言 的 基本 结构 形式 与 CC++、VB、Delphi 等 十 分 类 似 , 但 它 不 像 这 些 语 言 一 
样 ,需要 先 编译 ,JavaScript 语言 是 一 种 脚本 语言 ,在 程序 运行 过 程 时 被 逐 行 地 解释 运行 。 
JavaScript 语言 可 以 与 HTML 语言 紧密 结合 在 一 起 ,从 而 方便 用 户 的 使 用 操作 。 

JavaScript 语言 的 出 现 ,使 得 信息 和 用 户 之 间 不 仅 只 是 一 种 显示 和 浏览 的 关系 ,而 是 实 
现 了 一 种 实时 的 ,动态 的 、 可 交 式 的 能 力 。 从 而 基于 静态 的 HTML 页 面 将 被 取代 ,Web 页 
面 可 提供 动态 实时 信息 ,并 对 客户 操作 进行 反应 。 而 且 更 重要 的 是 ,使 用 JavaScript 语言 可 
以 在 客户 端 实现 一 定量 的 动态 的 、 交 互 式 的 操作 ,不 需要 通过 网 络 将 数据 传送 到 服务 器 端 进 
行 计算 后 再 通过 网 络 反 馈 给 客户 端 ,从 而 既 可 大 幅度 降低 服务 器 端的 压力 ,又 可 以 通过 减少 
网 络 传输 缩小 系统 反应 延迟 和 网 络 流量 。 这 些 对 于 而 今 如 何 处 理 因特网 上 爆发 性 增长 的 海 
量 数据 是 非常 重要 的 。 

JavaScript 语言 是 一 种 新 的 基于 对 象 和 事件 驱动 并 具有 安全 性 能 的 脚本 语言 ,开发 人 
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员 可 以 在 短 时 间 内 掌握 ,并 应 用 到 实际 的 软件 开发 中 。jJavaScript 语言 在 创建 复杂 程序 和 
语言 的 易 用 性 方面 找到 了 一 个 最 佳 的 平衡 点 。 

JavaScript 语言 不 是 解释 型 Java 语言 ,二 者 虽然 在 名 字 上 相近 ,但 是 由 不 同 的 公司 发 
明 ,运行 环境 也 大 不 相同 。 

Java 语言 是 由 Sun 公司 开发 的 一 种 与 平台 无 关 的 、 面 向 对 象 的 程序 设计 语言 。Java 可 
以 用 来 设计 独立 的 应 用 程序 ,可 以 用 来 制作 与 平台 无 关 的 、 与 用 户 交互 的 复杂 软件 。Java 
的 源 代码 必须 经 过 编译 ,使 用 Java 语言 开发 的 程序 必须 在 Java 虚拟 机 (JVM) 内 运行 。 

JavaScript 语言 是 由 Netscape 公司 创建 开发 的 。 最初, Netscape 公司 将 其 命名 为 
LiveScript, 其 语法 以 Java 为 基础 ,但 比 Java 简洁 ,同时 由 于 是 一 种 脚本 语言 ,无 须 编译 ,可 
直接 由 浏览 器 解释 运行 。 后 来 见 LiveScript 大 有 发 展 前 途 ,Sun 公司 与 Netscape 公司 一 拍 
即 合 ,签订 协议 ,将 LiveScript 更 名 为 JavaScript. 从 而 造就 了 这 个 强 有 力 的 Web 开发 


语言 。 


后 来 ,JavaScript 被 提交 给 ECMA(European Computer Manufacturers Association, 欧 
洲 计算 机 厂商 协会 ) 制 定 为 ECMAScript 标准 ,编号 为 ECMA-262, 目前 最 新 的 版 本 为 
ECMA-262 3th Edition。ECMA-262 4th Edition 正在 研讨 开发 过 程 中 , Mozilla 基金 会 和 
Adobe 公司 是 ECMA-262 4th Edition 的 主要 推动 者 。 

JavaScript 一 般 在 一 个 浏览 器 内 运行 ,是 解释 性 编程 语言 ,无 需 编译 ,而 浏览 器 一 般 内 
置 有 JavaScript 解释 器 , 即 解释 引擎 。 

JavaScript 与 JScript 也 是 不 一 样 的 。JScript 是 微软 公司 对 ECMA-262 语言 规范 的 一 
种 实现 , 即 另 一 种 脚本 语言 。 而 微软 公司 宣称 JScript 完全 实现 了 ECMA 标准 。 微 软 公 司 
原本 希望 利用 在 操作 系统 上 的 优势 使 其 发 布 的 VBScript 与 JavaScript 在 客户 端 一 决 高 下 ， 
但 市 场 反应 并 不 尽 如 人 意 ; 很 快 微软 公司 改变 策略 ,根据 ECMA-262 规范 发 布 了 JScript, 
并 不 断 对 其 版 本 进行 更 新 。JScript 最 新 的 版 本 是 基于 尚未 定稿 的 ECMAScript4. 0 版 规范 
的 JScript . NET ,并且 可 以 在 微软 的 . Net 环境 下 编译 。 

JavaScript 语言 有 以 下 几 方 面 的 特点 : 

。 脚本 编写 语言 。 首 先 JavaScript 语言 是 一 种 脚本 语言 , 同 其 他 脚本 语言 一 样 ， 
JavaScript 语言 同样 是 一 种 解释 性 语言 , 它 提 供 了 一 种 简单 而 有 效 的 开发 方式 。 
JavaScript 语言 的 基本 结构 形式 与 CC++、VB、Delphi 等 高 级 语言 类 似 , 而 
JavaScript 语言 不 需要 实现 编译 。 
基于 对 象 的 语言 。JavaScript 语言 是 一 种 基于 对 象 的 语言 。 在 编程 时 ,JavaScript 语 
言 可 以 运用 自己 已 经 创建 的 对 象 ,许多 功能 可 以 来 自 于 脚本 环境 中 对 象 的 方法 与 脚 
本 的 相互 作用 。 
简单 性 。JavaScript 语言 是 一 种 基于 Java 基本 语句 和 控制 流 之 上 的 简单 而 紧凑 的 
语言 ,另外 其 变量 类 型 采用 弱 类 型 ,并 未 使 用 严格 的 数据 类 型 。JavaScript 语言 入门 
很 简单 ,但 是 要 先 学 好 HTML 语言 。 

。 安全 性 。JavaScript 语言 是 一 种 安全 性 语言 , 它 不 允许 访问 本 地 的 硬盘 ,并 不 能 将 数 
据 存 和 人 到 服务 器 上 ,不 允许 对 网 络 文档 进行 修改 和 删除 ,只 能 通过 浏览 器 实现 信息 


111 


M 


112 


V 


Web 前 端 设计 一 一 HTML+CSS+jQuery 技 术 教 程 


浏览 或 动态 交互 。 从 而 可 以 有 效 地 防止 数据 的 丢失 。 

动态 性 。JavaScript 语言 是 动态 的 , 它 可 以 直接 对 用 户 或 客户 输入 做 出 响应 ,无 须 经 
过 服务 器 端 程序 。 它 对 用 户 的 反映 响应 ,是 以 事件 驱动 的 方式 进行 的 。 所 谓 事件 驱 
动 ,就 是 指 在 主页 中 执行 了 某 种 操作 所 产生 的 动作 ,就 称 为 事件”。 比 如 按 下 鼠标 、 
移动 窗口 .选择 菜单 等 都 可 以 视 为 事件 。 当 事件 发 生 后 ,可 能 会 引起 相应 的 事件 
响应 。 

跨 平 台 性 。 一 般 的 程序 设计 语言 编写 的 程序 都 与 运行 平台 有 关 。 例 如 ,Linux 上 无 
法 运行 Windows 程序 。JavaScript 语言 是 仅 依赖 于 浏览 器 本 身 ,与 操作 环境 无 太 多 
关系 ,只 要 能 运行 浏览 器 的 计算 机 ,并 支持 JavaScript 语言 的 浏览 器 就 可 以 正确 执 
行 。 任 何事 物 都 有 其 两 面 性 ,JavaScript 语言 当然 也 有 其 局 限 性 。 

与 浏览 器 相关 的 局 限 性 。 目 前 ,因特网 上 有 很 多 的 浏览 器 ,例如 Navigator Internet 
Explore, Mosaic, Foxfire, Opera 等 ,虽然 绝 大 多 数 浏览 器 都 支持 JavaScript 语言 ,但 
并 不 是 所 有 浏览 器 的 所 有 版 本 都 支持 。 当 然 在 显示 一 个 带 有 JavaScript 程序 的 网 
页 时 ,支持 或 不 支持 JavaScript 语言 的 浏览 器 显示 的 结果 将 会 全 然 不 同 。 

与 安全 性 相关 的 局 限 性 。JavaScript 语言 的 设计 目标 之 一 就 是 “安全 性 ”。 它 不 允许 
访问 本 地 的 硬盘 ,并 不 能 将 数据 存 人 到 服务 器 上 ,不 允许 对 网 络 文档 进行 修改 和 删 
除 。 总 而 言 之 ,JavaScript 语言 只 生存 于 WEB 主页 的 世界 里 。 这 自然 要 以 牺牲 
JavaScript 的 一 些 功能 来 换 得 。 


下 面 通过 一 个 简单 的 例子 进一步 说 明 JavaScript 语言 。 
这 是 利用 记事 本 开发 的 一 个 JavaScript 程序 ( 例 4. 1) ,显示 如 图 4. 1 所 示 。 


建 


一 ~ 
@ 次 好 学 习 JavaScript 滞 言 - Windows Internet Explorer [=] js) 
OO [B/D/example/Eexa + [4] x ||P Be ER 

re) RHE) BE = IAM ESH 


Ve Be | SWF IavaScripti EE 


欢迎 i avaScript REMTE sa 


A 欢迎 学 习 JavaScript 语 言 ! 


图 4.1 第 一 个 JavaScript 程序 


立 该 程序 的 方法 是 ,选择 开始 一 所 有 程序 一 附件 一 记事 本 ,打开 记事 本 ,并 输入 程序 


如 图 4. 2 所 示 。 
保存 时 ,保存 类 型 选择 “所 有 文件 ”, 文 件 名 输入 以 html 结尾 的 名 称 , 如 图 4. 3 所 示 。 


第 4 章 jQuery 


P Exampled-1.htal - 记事 本 
IPO MIG) BO 查看 Hw 


<html> 
<head> 


<title> 欢 迎 学 习 JavaScript 语 言 </title> 
<script language=JavaScript> 
function welcome() { 
alert(" 欢 迎 学 习 JavaScript 语 言 !");} 
</script> 
</head> 


<body> 
<a href="#" onclick="welcomel();" > 欢迎 进入 JavaScript 世 界 ! </a> 
</body>| 

</html> 


图 4.2 利用 记事 本 编写 JavaScript 程序 


保存 在 QD): a 


© Exanple4-1. html 
© Exanpled-2. html 
© Exanpled-3. html 
© Example4-4. html 
© Exampled-5. html 
© Exanpled-6. html 
© Exanple4-7. html 
© Exanpled-8. html 
© Exanpled-9. html 
© Example4-10. html 
© Exanpled-11, html 
© Exanple4-12, html 


HS |Example4-1. html ~ 
0 sy) (ee 


~ 


图 4.3 程序 存储 


其 中 在 代码 编辑 的 记事 本 窗口 输入 如 下 所 示 代 码 。 


<html> 
<head> 
<title> 欢 迎 学 习 JavaScript 语言 </title> 
<script language = JavaScript > 
function welcome() { 
alert(" 欢 迎 学 习 JavaScript 语言 '");} 
</script> 
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</head> 
<body> 
<a href = "#" onclick = "welcome( );"> 欢 迎 进入 JavaScript 世界 !</a> 
</body> 
</html > 


<script language = JavaScript 之 代表 代码 的 开始 , 二 /script 二 代表 代码 的 结束 ， 
JavaScript 程序 代码 要 放 在 两 者 之 间 。“alert ("欢迎 学 习 JavaScript 语言 !");” 是 真正 的 
JavaScript 程序 ,alert 将 弹出 一 个 对 话 框 , “欢迎 学 习 JavaScript 语言 !? 将 是 对 话 框 中 要 显 
示 的 内 容 。 

JavaScript 也 可 以 存放 在 外 部 脚本 文件 .js 中 。 例 如 JavaScript 语句 “alert(" 欢 迎 学 习 
JavaScript 语言 1");” 可 存放 在 外 部 脚本 文件 Example4-1. js 中 。 如 果 设 计 页 面 需 用 
Example4-1.js 时 ,可 以 下 列 语句 调用 。 


<script language = "JavaScript" src = "Example4 - 1. js"></script > 


同 其 他 语言 一 样 JavaScript 语言 有 其 自身 的 基本 数据 类 型 .表达 式 和 算术 运算 符 以 及 
程序 的 基本 框架 结构 。 

变量 是 程序 设计 语言 的 最 基本 元 素 。 在 程序 运行 时 ,需要 用 一 个 个 单元 将 信息 存储 起 
来 ,这 些 单元 就 是 变量 。 变 量 可 以 理解 为 一 个 存放 信息 或 数据 的 容器 。JavaScript 语言 是 
一 种 弱 类 型 语言 , 即 程序 中 所 用 到 的 每 个 存储 单元 ( 即 变 量 ) 不 必 指 明 其 数据 类 型 。 

JavaScript 语言 对 于 变量 的 命名 有 一 些 规 定 。 首 先 ,在 JavaScript 语言 中 定义 的 变量 名 
称 不 能 与 保留 字 冲 突 。 保 留 字 是 指 在 JavaScript 语言 中 已 经 使 用 的 名 称 以 及 保留 给 以 后 的 
版 本 可 能 使 用 的 单词 。 例 如 ,do,function 等 。 其 次 ,变量 名 必须 以 字母 或 者 下 划 线 开始 ,而 
且 变 量 名 中 不 能 有 空格 。 另 外 ,JavaScript 语言 是 区 分 大 小 写 的 。 

常量 是 JavaScript 中 的 固定 值 , 其 在 程序 中 是 不 发 生变 化 的 ,为 程序 提供 固定 的 和 精确 
的 值 。 变 量 是 在 程序 中 可 以 赋值 并 改变 的 量 , 变 量 的 值 可 以 在 程序 运行 时 发 生变 化 。 
JavaScript 中 变量 的 生存 期 有 两 种 : 全 局 变量 和 局 部 变量 。 全 局 变量 在 主 程序 中 定义 ,其 有 
效 范围 从 其 定义 开始 ,一 直到 本 程序 结束 为 止 。 局 部 变量 在 程序 的 函数 中 定义 ,其 有 效 范围 
仅 在 该 函数 之 中 ; 当 函 数 结束 后 ,局 部 变量 生存 期 也 随即 结束 。 


4.1.1 基本 数据 类 型 


JavaScript 语言 中 有 4 种 基本 数据 类 型 : 数值 类 型 .逻辑 类 型 .字符 串 类 型 ,未 定义 
类 型 。 

数值 类 型 。 数 值 类 型 是 JavaScript 语言 中 比较 常用 的 类 型 。 在 JavaScript 语言 中 数值 
类 型 既 可 表示 整数 ,也 可 以 表示 实数 。 这 与 其 他 编程 语言 可 能 不 同 。 

逻辑 类 型 。 逻 辑 类 型 主要 用 于 逻辑 运算 ,因此 逻辑 类 型 的 变量 只 有 两 个 值 : True 或 
False。 

字符 串 类 型 。 一 个 字符 串 类 型 常量 是 由 单 引 号 或 者 双 引 号 包围 的 多 个 字符 组 成 的 , 注 
意 这 里 的 引号 指 的 是 英文 引号 。 

未 定义 类 型 。 未 定义 类 型 又 称 为 undefined 类 型 ,表示 一 个 变量 还 没有 赋予 任何 初 值 。 


4.1.2 运算 符 


运算 符 可 以 用 来 处 理 数 字 字符 串 及 比较 运算 等 ,是 组 成 表达 式 的 连接 黏 和 剂 。 与 大 多 
数 编程 语言 一 样 ,JavaScript 语言 的 运算 符 可 以 被 分 成 几 种 常见 类 型 。 


1. 算术 运算 符 
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算术 运算 符 主要 用 于 数据 计算 ,其 操作 数 一 般 为 数值 类 型 ,返回 结果 也 是 一 个 数值 类 
型 。 在 JavaScript 语言 中 算术 操作 符 又 可 以 分 为 单 目 操 作 运算 符 和 双 目 操作 运算 符 ; 运算 
所 需 变量 为 一 个 的 运算 符 叫 单 目 操作 运算 符 ,运算 所 需 变 量 为 两 个 的 运算 符 叫 双 目 操作 运 
算 符 。JavaScript 语言 算数 运算 符 如 表 4. 1 所 示 。 


表 4.1 算术 运算 符 


操作 符 类 别 R Fil 说 OA 

+ 二 元 ml=m2+m3 ml 等 于 m2 4 m3 的 和 

一 二 元 ml=m2—m3 ml 等 于 m2 减 去 m3 的 差 

* 三 元 ml 一 m2 * m3 ml 等 于 m2 与 m3 的 乘积 

i 二 元 ml=m2/m3 ml 等 于 ml 除 以 m2 的 值 

% 三 元 ml=m2% m3 ml 等 于 m2 除 以 m3 的 余数 

十 十 一 元 分 十 十 ml 与 ml 十 十 前 者 先 对 ml 加 1 而 后 操作 ,后 者 先 操作 后 加 1 
= 元 分 一 一 ml 与 ml 一 一 前 者 先 对 ml 减 1 而 后 操作 ,后 者 先 操作 后 减 1 

2. 赋值 运算 符 


赋值 运算 符 是 用 于 将 一 个 数据 赋予 一 个 变量 、 属 性 或 引用 ,其 中 数据 可 以 是 变量 ,也 可 


以 是 表达 式 。 常 用 的 赋值 运算 符 如 表 4. 2 所 示 。 


表 4.2 赋值 运算 符 


操作 符 类 别 R Bil 说 OA 

一 二 元 ml 一 m2 ml 被 赋予 m2 的 值 

+= 三 元 ml 十 一 m2 ml 被 赋予 m2 与 ml 的 和 

一 一 zm ml—=m2 ml 被 赋予 m2 与 ml 的 差 
x= 三 元 ml x =m2 ml 被 赋予 m2 与 ml 的 积 

/= 二 元 ml/ 一 m2 ml 被 赋予 ml 除 以 m2 的 值 
%= Z% ml% =m2 ml 被 赋予 m2 除 以 m2 的 余数 
3. 关系 运算 符 


关系 运算 符 也 就 是 比较 运算 符 ,返回 值 是 布尔 型 的 真 (true) 或 假 (false), 如 表 4. 3 


所 示 。 
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表 4.3 关系 运算 符 


示 例 说 明 


操作 符 类 别 

== 二 元 ml 一 m2 一 一 m3 车 m2 和 m3 相等 , 则 ml 为 true, 和 否则 为 false 

{= =e. ml=m2!=m3 车 m2 和 m3 不 相等 , 则 ml W true. FM H false 

> = 35 ml=m2>m3 车 m2 大 于 m3, 则 ml 为 true, 和 否则 为 false 

< 二 元 ml=m2<m3 车 m2 小 于 m3, Ml) ml 为 true, 和 否则 为 false 

>= 二 元 ml=m2>=m3 车 m2 不 小 于 m3, 则 ml 为 true, 和 否则 为 false 

<= = 5 ml=m2<=m3 车 m2 不 大 于 m3, 则 ml 为 true, 和 否则 为 false 
4. 逻辑 运算 符 


逻辑 运算 符 主 要 用 于 逻辑 判断 ,主要 包括 逻辑 与 .逻辑 或 和 逻辑 非 , 如 表 4.4 所 示 。 


表 4.4 逻辑 运算 符 


操作 符 类 别 示 例 说 明 
&& =e. ml=m2é.&m3 车 m2 和 m3 都 为 true, 则 ml X true, FM false 
WI 二 元 ml=m2||m3 若 m2 BK m3 有 一 个 为 true, 则 ml 为 true, BWA false 
! 一 元 Iml ti ml ¥ true, W! ml 为 false, 和 否则 为 true 
5. 位 运算 符 


位 运算 符 用 于 对 操作 数 进行 位 运算 。 在 计算 机 中 ,信息 是 以 二 进 制 形式 存储 的 。 
JavaScript 中 位 操作 符 就 是 专门 针对 二 进 制 数据 运算 的 。 
。 按 位 与 (&): 按 二 进 制 进行 与 操作 。 


按 位 或 (| ): 按 二 进 制 进行 或 操作 。 


。 按 位 异 或 (^) : 按 二 进 制 进行 异 或 操作 。 
。 按 位 取 反 (一 ) : 按 二 进 制 进行 取 反 操作 。 
© EEK): 按 二 进 制 进行 左 移 操作 。 

。 右 移 ( 二 二 ): 按 二 进 制 进行 与 操作 。 

° ROKR >>>): 添 0 后 右 移 。 


4.1.3 基本 控制 语句 


实际 4 


E 活 中 ,并 非 所 有 的 事情 都 是 按部就班 地 进行 。 基 本 的 数据 类 型 和 流程 控制 语句 


是 任何 变 成 语言 都 必须 有 的 内 容 。 与 其 他 编程 语言 类 似 , 在 JavaScript 中 可 通过 控制 语句 
控制 程序 的 流程 ,从 而 形成 程序 的 分 支 和 循环 。 
1. 选择 语句 


选择 语句 即 分 支 语句 ,主要 用 于 根据 某 个 条 件 来 决定 哪个 流程 被 执行 。 
(1) 站 语句 
证 语句 的 格式 如 下 所 示 。 
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证 (布尔 型 表达 式 ) 


{ 


语句 1; 


} 


else 


{ 


语句 2; 


} 


当 布尔 型 表达 式 的 值 为 true 时 ,执行 语句 1。 和 否则 跳 过 语句 1, 若 有 else 语句 , 则 执行 


语句 2。 


(2) switch 语句 

switch 语句 非常 类 似 于 过 语句 ,switch 语句 可 以 根据 表达 式 的 值 有 条 件 地 执行 分 支流 
F, switch 语句 可 以 一 次 将 表达 式 的 值 与 多 个 值 进行 比较 ,这 是 switch 语句 与 ff 语句 不 同 
的 地 方 。switch 语句 的 格式 如 下 所 示 。 


switch( 表 达 式 1) 


{ 
case {A 1: 
语句 1; 
break; 
case fË 2: 
语句 2 
break; 
default: 
默认 语句 ; 
break; 
} 


switch 语句 将 表达 式 1 的 值 分 别 与 case 中 的 多 个 值 进 行 比较 。 若 有 相符 的 选项 , 则 执 
行 相应 的 语句 集 ; 否则 就 执行 默认 语句 集 。 


例 4.1 


<html> 


说 明 计 语 句 与 switch 语句 的 用 法 ,程序 如 下 所 示 。 


<head> 
<title> 证 语句 与 switch 语句 </title> 

</head> 
<body> 
<script language = JavaScript > 
var d= "Saturday"; 
document. write("d="+d+"<br>"); 
if(d == "Saturday" ) 

document. write("d 是 周末 "); 
else if(d== "Sunday") 

document. write("d 是 周末 "); 
else 

document. write("d 不 是 周末 "); 
document. write("< br>"); 
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switch(d) 
{case "Saturday" :document.write("d 是 周末 "); 
break; 
case "Sunday" :document. write("d 是 周末 "); 
break; 
default:document. write("d 不 是 周末 "); 
} 
</script> 
</body> 
</html> 


运行 效果 如 图 4.4 所 示 。 


@ 证 自 与 cwitch 语 自 - Windows Internet Explorer 2 e2] 
Go- [E] DAExample\Exami ~| #9 x ||P Sez pr 


We CE | BiB SswitchiaD 


d=Saturday 


< 是 周末 


图 4.4 if WA switch 语句 


提示 : switch 语句 的 各 个 case 子 语句 中 ,一 般 都 要 以 “break;” 语 和 句 结束 。 
2. 循环 语句 


当 需 要 进行 大 量 重复 操作 时 ,通过 循环 语句 可 以 创建 循环 。JavaScript 语言 中 提供 了 
以 下 循环 控制 语句 : while 语句 .do-while 语句 for 语句 等 。 

(1) while 语句 

while 语句 执行 一 个 语句 或 语句 块 ,直到 条 件 表 达 式 为 false 为 止 。while 语句 的 格式 
如 下 所 示 。 

while( 条 件 表 达 式 ) 

{ 


循环 代码 ; 
} 


break 等 语句 可 以 将 控制 传递 到 循环 之 外 ,从 而 终止 while 循环 。 若 需要 将 控制 传递 给 
下 一 个 循环 但 不 退出 循环 ,可 以 使 用 continue 语句 。 

(2) do-while 语句 

do-while 语句 会 根据 条 件 表达 式 的 值 有 条 件 地 执行 其 中 的 循环 代码 。do-while 循环 非 
常 类 似 于 while 循环 。 

do-while 循环 与 while 循环 的 重要 区 别 在 于 : while 循环 的 布尔 测试 是 在 循环 刚 开 始 时 
进行 的 ,而 do-while 循环 的 布尔 测试 是 在 最 后 进行 的 ,这 样 do-while 循环 中 的 循环 语句 将 
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至 少 会 执行 一 次 。 
do…while 语句 的 格式 如 下 所 示 。 


do 


循环 代码 ; 
} while( 条 件 表达 式 ) 
(3) for 循环 
for 循环 重复 执行 一 个 语句 或 语句 块 ,直到 指定 的 循环 变量 超过 循环 条 件 为 止 。for i 
句 是 最 常 使 用 的 循环 语句 。 
for 语句 的 格式 如 下 所 示 。 


for( 循 环 变量 初始 化 ; 循环 条 件 ; 循环 操作 ) 


{ 


循环 代码 ; 


} 


for 语句 的 执行 过 程 如 下 所 示 。 

O 运行 初始 化 语句 ,为 循环 变量 赋 一 个 初 值 ; 

@ 判断 循环 条 件 ,决定 是 否 进入 循环 ; 

© 若 进 入 循环 ,执行 循环 语句 。 然 后 转 @ 。 

(4) break 和 continue 语句 

break 语句 使 得 循环 从 For 或 while 中 跳出 ,continue 使 得 跳 过 循环 内 剩余 的 语句 而 进 


入 下 一 次 循环 。 
例 4.2 说 明 循环 语句 的 用 法 ,程序 如 下 所 示 。 
<html> 
< head > 
<title> 循 环 语句 </title> 
</head> 
<body> 
<script language = JavaScript > 
var x,y; 
var s; 


</html> 


document. write("< hl > 九 九 乘法 表 </hl >"); 

for(x=1;x<=9;xt+) 

{ for(y=1;y<=x;yt+) 
{s=x+"»+"+y+"="+ (x+y); 
document. write(s + "&nbsp;&nbsp;"); } 
document. write("< br>"); 

} 

</script> 

</body> 


运行 效果 如 图 4. 5 所 示 。 
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@ RSA - Windows Internet Explorer 2 | Sj) 
GO > [E ontsample\txamples + |+| x ||P Sees AP >| 


2+1=2 2*2=4 

3+1=3 3*2=6 3*3=9 

4#+1=4 4+#2=8 4#+3=12 4+#4=16 

S#1=5 5#2=10 5*3=15 5+4=20 5*5=25 

6#1=6 6*2=12 6*3=18 6*4=24 6*5=30 6*6=36 

T*1=7 7*2=14 7*3=21 7*4=28 7+5=35 7*6=42 7*7=49 

8+1=8 8+2=16 8*3=24 8+4=32 8+5=40 8+6=48 8*7=56 8*8=64 

#1=9 9*2=18 9*3=27 9*4=36 9*5=45 9*6=54 9#7=63 9*8=72 9*9=81 


图 4.5 循环 语句 


ER: 该 例 使 用 双重 循环 ,外 层 循 环 控制 行 数 ; 内 层 循环 控制 每 行 的 内 容 , 包 括 被 乘 
KRG RFF RARR. 


4.1.4 函数 


函数 是 能 够 完成 一 定 功能 的 代码 块 组 合 。 在 JavaScript 中 ,函数 可 以 被 事件 或 其 他 语 
句 调 用 。 在 程序 设计 时 ,经 常 把 一 个 大 程序 分 为 若干 个 小 程序 , 即 模块 ,每 个 模块 完成 一 定 
的 功能 且 相 对 独立 。 从 而 使 各 模块 相互 独立 ,任务 单一 ,程序 清晰 , 易 懂 、 易 读 、 易 维护 。 而 
且 这 样 设计 可 以 解决 代码 的 重复 。 可 以 把 经 常用 到 的 完成 某 种 功能 的 程序 段 编 写成 函数 ， 
每 当 需 要 实现 该 功能 时 只 要 调用 该 函数 即 可 ,无 须 重复 编写 代码 。 

在 JavaScript 中 ,不 区 分 函数 (Function) 和 过 程 (Procedure) ,只 有 函数 。 函 数 完成 相应 
功能 后 可 以 有 返回 值 ,也 可 以 没有 , 即 JavaScript 中 的 函数 具有 函数 和 过 程 的 功能 。 给 函数 
传递 信息 的 方法 是 通过 函数 名 后 的 参数 来 传递 的 , 即 要 传递 给 函数 的 信息 就 是 参数 。 

提示 : 当然 ,函数 可 以 使 用 参数 ,也 可 以 不 使 用 参数 。 函 数 参 数 的 个 数 没 有 限制 ,由 该 
函数 的 具体 功能 而 决定 。 


1. 函数 定义 


在 JavaScript 中 ,函数 必须 在 定义 以 后 才能 使 用 。 通 常 函 数 的 定义 放 在 HTML 文档 头 
中 。 函 数 定义 的 格式 如 下 所 示 。 


function 函数 名 (参数 , 变 元 ){ 
函数 体 ; 

return 表达 式 ; 

} 


提示 : 函数 名 是 定义 自己 函数 的 名 字 ; 参数 是 传递 给 函数 使 用 或 操作 的 值 ; 返回 值 前 
用 关键 字 return. 
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例 4.3 说 明 函 数 的 定义 与 使 用 ,程序 如 下 所 示 。 


<html> 
<head> 
<title> 函 数 的 定义 与 使 用 </title> 
<script language = JavaScript > 
// 函 数 定义 
function test() // 无 参数 函数 
{ 
document. write( "该 函数 没有 使 用 参数 "); 
} 
function test1(exp1) // 带 参数 函数 
{ 
document. write(" 该 函数 使 用 参数 " + expl); 
} 
</script> 
</head> 
<body> 
<script language = JavaScript > 
// 函 数 使 用 
test(); 
document. write("< br>"); 
test1("x"); 
</script> 
</body > 


运行 效果 如 图 4.6 所 示 。 


@ 画 娄 的 定义 与 使 用 - Windows Internet Explorer Eme 
ðO- ie) DAExample\Examl > | 全 | x| [P ares pr 
x Rac) BB TERA IAM W 


khak G 因数 的 定义 与 使 用 


该 函数 没有 使 用 参数 
该 函数 使 用 参数 x 


图 4.6 函数 的 定义 与 使 用 


2. 函数 中 的 形式 参数 


jQuery 


在 函数 的 定义 中 ,函数 名 后 有 参数 表 , 参 数 个 数 可 能 是 一 个 或 几 个 ,在 JavaScript 中 可 


以 通过 arguments. length 来 确定 参数 个 数 。 
3. JavaScript 的 函数 


在 JavaScript 中 支持 两 种 函数 : JavaScript 中 的 库 函 数 和 用 户 自己 创建 的 函数 。 


(1) ERX. JavaScript 中 提供 了 很 多 库 函 数 ,以 供 编 程 人 员 直 接 使 用 。 例 如 ,trim() 
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正则 表达 式 去 除 左右 空格 ; isDigit() 检 查 是 否 为 数字 ; eval() 对 用 字符 串 行 表示 的 合法 表 
达 式 求 值 。 

(2) 用 户 自 己 创建 的 函数 。 在 JavaScript 中 允许 用 户 自己 创建 自己 的 函数 ,并 在 需要 
的 地 方 使 用 ,函数 的 创建 和 使 用 可 参考 例 4. 4。 


4.1.5 事件 驱动 和 事件 处 理 


JavaScript 语言 是 一 种 基于 对 象 的 语言 ,其 基本 特征 就 是 采用 事件 驱动 。 用 户 的 操作 
或 系统 操作 的 动作 称 为 事件 (Event)。 由 事件 引发 的 一 连 串 程序 的 动作 , 称 为 事件 驱动 
(Event Driver)。 而 对 事件 进行 处 理 的 程序 或 函数 称 为 事件 处 理 程序 (Event Handler) 。 


1. 事件 处 理 程序 


在 JavaScript 语言 ,事件 处 理 程序 通常 由 函数 担任 ,其 基本 格式 与 函数 格式 一 样 , 如 下 
所 示 。 
function 事件 处 理 名 (参数 表 ){ 


事件 处 理 语句 集 ; 
} 


2. 事件 驱动 


在 JavaScript 语言 中 ,事件 主要 是 通过 鼠标 或 键盘 的 动作 引发 的 ,其 主要 事件 如 表 4. 5 
所 示 。 


表 4.5 主要 事件 
事 件 动 作 事 件 动 作 
onAbort 中 止 正在 加 载 的 对 象 onUnload 关闭 当前 网 页 
onBlur 失去 焦点 onMouseDown 按 下 鼠标 左 键 
onFocus 获取 焦点 onMouseMove 移动 鼠标 指针 
onChange 改变 对 象 的 值 onMouseOut 鼠标 指针 离开 某 对 象 
onClick 在 对 象 上 单 击 鼠 标 onMouseOver 鼠标 指针 悬 停 于 某 对 象 之 上 
onDblClick 在 对 象 上 双击 鼠标 onMouseUp 放 开 鼠标 左 键 
onDrogDrop 拖 搜 对 象 onMove 窗口 被 移动 时 
onError 加 载 文件 或 图 形 发 生 错 误 onResize 窗口 大 小 被 改变 
onKeyDown 按 下 键盘 上 任意 键 的 瞬间 onSelect 选择 某 对 象 
onKeyPress 按 下 键盘 上 的 任意 键 时 onSubmit 单 击 表单 上 的 Submit 按钮 
onKeyUp 某 键 被 按 下 后 弹 起 瞬间 onReset 单 击 表单 上 的 Reset 按钮 
onLoad 浏览 器 读 和 文件 时 


3. 事件 处 理 程序 举例 


(1) 自动 加 载 和 自动 卸载 
下 例 是 一 个 自动 加 载 和 自动 印 载 的 例子 。 当 浏览 器 读 入 网 页 时 将 自动 加 载 loadform() 
函数 ,关闭 网 页 时 自动 运行 卸载 unloadform() eh RK. fi] 4.5 的 程序 如 下 所 示 。 
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<html> 
<head> 
<title> 自 动 加 载 与 自动 印 载 </title> 
<script language = JavaScript > 
function loadform( ) // 自 动 加 载 函 数 
{ 
alert(" 这 是 一 个 自动 加 载 的 例子 !"); 
function unloadform( ) // 自 动 印 载 函 数 
{ 
alert(" 这 是 一 个 自动 印 载 的 例子 !") ; 
} 
</script> 
</head> 
< body onLoad = "loadform()" onUnload = "unloadform( )"> 
< hl > 自动 加 载 与 自动 印 载 例子 < hl > 
</body> 
</html> 


运行 效果 如 图 4.7 所 示 , 当 浏览 器 运行 网 页 时 将 弹出 一 个 对 话 框 * 这 是 一 个 自动 加 载 的 
例子 ”。 


r n 

@ SIRSE - Windows Internet Explorer o |e = 

Go- [E] DAExample\Examt -| 分 | x |[P See P 
ZHAO Si 查看 [V) “收藏 夫 (A) ILAT) ”帮助 (H 


EL _ | @ smsan 


自动 加 载 与 自动 印 载 例子 一 


来 自 网 页 的 消息 区] 


A 这 是 一 个 自动 j 载 的 例子 ! 


图 4.7 自动 加 载 


另外 , 当 关 闭 本 页 面 时 会 将 弹出 一 个 对 话 框 “这 是 一 个 
自动 卸载 的 例子 ”, 运 行 效果 如 图 4.8 所 示 。 

(2) 事件 驱动 和 函数 处 理 例子 

下 例 是 一 个 事件 驱动 和 函数 处 理 的 例子 。 当 用 户 输入 
姓名 和 单位 后 , 单 击 “ 新 增 ” 按 钮 ,在 下 面 表格 中 将 根据 用 户 
输入 信息 添加 新 的 一 行 , 例 4.6 的 程序 如 下 所 示 。 


<html> 


图 4.8 Aaa 
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<head> 
<title> 事 件 驱 动 和 函数 处 理 的 例子 </title> 
<script language = "JavaScript"><! 一 一 
function addRow() { 
var tableObj = document. getElementById("mainTb" ) ; 
var tableBodyObj = document. getElementById("mainBody" ) ; 
var newRowObj = document. createElement("tr") ; 
newRowObj. id = "row" + (tableObj. rows. length- 1); 
var newNameCell = document. createElement("td") ; 
var newCompanyCell = document. createElement("td") ; 
var newButtonCell = document. createElement("td") ; 
newNameCell. innerHTML = document. getElementBylId("newName" ). value; 
newCompanyCell. innerHTML = document. getElementById("newCompany" ). value; 
newButtonCell. innerHTML = '< input type = "button" value = "删除 " onclick = "deleteRow 
(‘+ (table0bj. rows. length- 1) + ')">'; 


newRowObj. appendChild(newNameCel1) ; 
newRowObj. appendChild(newCompanyCel1) ; 
newRow0bj. appendChild(newButtonCel1l) ; 
tableBody0bj. appendChild(newRow0bj) ; 
} 
function deleteRow( index) { 
var tableBodyObj = document. getElementBylId("mainBody" ) ; 
var rowObj = document. getElementByld('row' + index) ; 
tableBody0bj. removeChild(row0bj) ; 
} 
--> </script> 
</head> 
< body style = "margin: 40px"> 
<div>< span id = "new"> 姓 名 < input type = "text" name = "newName" id = "newName"> 单 位 < input 
type = "text" id= "newCompany">< input type = "button" value = "新 增 ” onclick = "addRow()"> 
</span ></div> 
<table id= "mainTb" border = "1"> 
< tbody id = "mainBody"> 
<tr><th width = "80"> 姓 名 </th>< th width = "250"> 单 位 </th>< th > 操作 </th></tr> 
<tr id = "row0">< td> 张 三 </td>< td> 上 海 软件 公司 </td>< td>< input type = "button" value 
= "删除 "onclick = "deleteRow(0)"></td></tr > 
<tr id= "rowl"><td> 李 四 </td><td> 广 州 食品 公司 </td>< td>< input type = "button" value 
= "FBR" onclick = "deleteRow(1)"></td></tr> 
</tbody> 
</table> 
</body> 
</html> 


运行 效果 如 图 4.9 所 示 ,用 户 可 以 在 页 面 中 输入 姓名 与 单位 , 当 单 击 “新 增 ? 时 在 下 面 的 


表格 中 将 会 增加 相应 的 内 容 ; 当 用 户 单 击 表格 中 某 一 行 的 “删除 ”时 ,相应 的 行 就 会 从 表格 
中 删除 。 
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@ 于 | 区 动 和 函数 处 理 的 例子 - Windows Internet Explorer 己 Bd 
QO > [B dvtxemple\txamy ~| +] x |[P Saez BR 


Aak 6 事 件 驱动 和 函数 处 理 的 例子 


Ha 单位 7 
mee 单位 te | 
= BERHAN (mi) 
an 广州 食品 公司 (a) 


图 4.9 事件 驱动 和 函数 处 理 


4.1.6 基于 对 象 的 JavaScript 语言 


JavaScript 语言 是 一 种 基于 对 象 的 语言 。JavaScript 提供 了 一 些 非常 有 用 的 预定 义 对 
象 以 供 编程 人 员 使 用 ,但 JavaScript 没有 提供 抽象 继承 、 重 载 等 有 关 面 向 对 象 语言 的 功能 。 


1. 对 象 的 基础 知识 


JavaScript 语言 中 的 对 象 是 由 属性 (Properties) 和 方法 (Methods) 两 个 基本 的 元 素 的 构 
成 的 。 属 性 是 对 象 在 实施 其 所 需要 行为 的 过 程 中 ,实现 信息 的 装载 单位 ,从 而 与 变量 相关 
联 ; 方法 是 指 对 象 能 够 按照 设计 者 的 意图 而 被 执行 ,从 而 与 特定 的 函数 相 联 。 

JavaScript 语言 中 的 对 象 可 以 通过 以 下 方式 获得 : 直接 引用 JavaScript 内 部 对 象 ; 由 浏 
览 器 环境 中 提供 ; 创建 新 对 象 。 

提示 : 一 个 对 象 在 被 引用 前 ,这 个 对 象 必 须 存 在 ,否则 将 出 错 。 


2. 对 象 操作 语句 


(1) new 运算 符 
编程 人 员 可 以 使 用 new 运算 符 来 创建 一 个 对 象 , 其 创建 对 象 使 用 如 下 格式 ， 


newobject = new Object (SR); 
下 例 是 一 个 关于 创建 新 对 象 和 使 用 对 象 的 例子 , 例 4. 7 的 程序 如 下 所 示 。 


<html> 

<head> 

<title > 创建 新 对 象 和 使 用 对 象 </title> 
</head> 

<body> 

< script language = "JavaScript"> 

var today; 

today = new Date() ; 
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document. write(" 今 天 是 " + today. getFullYear() + "年 " + (today. getMonth() +1) + "月 " + today. 
getDate() +"H"); 

</script> 

</body> 

</html > 


其 中 today 是 利用 Date ) 新 创建 的 对 象 ,可 以 利用 today. getFullYear, today. getMonth, 
today. getDate 得 到 其 年 月 .日 。 运 行 效果 如 图 4. 10 所 示 , 当 浏览 器 读 人 网 页 时 将 弹出 一 
个 对 话 框 “这 是 一 个 自动 加 载 的 例子 ”。 


@ 创 时 新 对 铺 和 使 用 对 象 - Windows Internet Explorer [EE 
(CON [E] DAExample\Examl ~| 49 x| [P Saaz P~ 


RRE SE 3 A 


eee E 创 建新 对 象 和 使 用 对 象 


今天 是 2014 年 8 月 6 日 


图 4.10 创建 新 对 象 和 使 用 对 象 


(2) with 语句 
使 用 with 语句 的 意思 是 : 在 该 语句 体内 ,任何 对 变量 的 引用 被 认为 是 这 个 对 象 的 属 
性 ,以 节省 一 些 代码 。 格 式 如 下 : 


with object 
{ 语句 集 ; } 


所 有 在 with 语句 后 的 花 括 号 中 的 语句 ,都 是 在 后 面 object 对 象 的 作用 域 的 。 
例如 如 下 语句 : 


< script language = "JavaScript"> 
document. write ("欢迎 光临 : <br>"); 
document. write ("一 楼 是 家 电 卖 场 .< br >"); 
document. write ("二 楼 是 计算 机 卖场 .< br >"); 
</Script > 


可 以 使 用 with 语句 来 改写 成 如 下 代码 : 


<script language = "JavaScript"> 
with (document) 
{ 
write ("欢迎 光临 : <br>"); 
write ("一 楼 是 家 电 卖 场 .< br >"); 
write ("二 楼 是 计算 机 卖场 .< br>"); 
} 
</Script > 


(3) this 关键 字 
this 是 对 当前 的 引用 ,在 JavaScript 由 于 对 象 的 引用 是 多 层次 、 多 方位 的 ,往往 一 个 对 
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象 的 引用 又 需要 对 另 一 个 对 象 的 引用 ,而 另 一 个 对 象 有 可 能 又 要 引用 另 一 个 对 象 ,这 样 有 可 
能 造成 混乱 ,为 此 JavaScript 提供 了 一 个 用 于 将 对 象 指定 当前 对 象 的 语句 this。 随 着 函数 
使 用 场合 的 不 同 ,this 的 值 会 发 生变 化 。 但 是 有 一 个 总 的 原则 , 那 就 是 this 指 的 是 调用 函数 
的 那个 对 象 。 

(4) for…in 语句 

格式 如 下 : 


for( 对 象 属性 名 in 已 知 对 象 名 ) 


该 语句 的 功能 是 用 于 对 已 知 对 象 的 所 有 属性 进行 操作 的 控制 循环 。 它 是 将 一 个 已 知 对 
象 的 所 有 属性 反复 赋值 给 一 个 变量 ,而 不 是 使 用 计数 器 来 实现 的 。 
下 例 是 一 个 关于 for…in 语句 的 例子 , 例 4. 8 的 程序 如 下 所 示 。 


<html> 
< head > 
<title> for- in 语句 </title> 
</head> 
<body> 
< Script language = JavaScript> 
var x; 
var mycars = new Array(); 
mycars[0] = "新 浪 网 "; 
mycars[1] = "百度 网 "; 
mycars[2] = "搜狐 网 "; 
for(x in mycars) 
{ 
document. write(mycars[x] + "< br >"); 
i 
</script> 
</body> 
</html> 


运行 效果 如 图 4.11 所 示 。 
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图 4.11 for…in 语句 


3. 常用 对 象 的 属性 与 方法 
JavaScript 为 编程 人 员 提 供 了 一 些 非常 有 用 的 常用 内 部 对 象 和 方法 ,例如 String( 字 符 
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$) .Math( 数 值 计 算 ) .Date( 日 期 ) 等 。 
(1) String( 字 符 串 ) 
string 对 象 的 属性 主要 是 length, 它 表明 了 字符 串 中 的 字符 个 数 , 包 括 所 有 符号 。 
string 对 象 的 方法 主要 用 于 有 关 字 符 串 在 Web 页 面 中 的 显示 、 字 体 大 小 、. 字 体 颜 色 、. 字 
符 的 搜索 以 及 字符 的 大 小 写 转换 。 包 括 以 下 方法 : 
anchor() 创建 HTML fii. 
big() 用 大 号 字体 显示 字符 串 。 
blink() 显示 内 动 字符 串 。 
bold() 使 用 粗 体 显示 字符 串 。 
charAt() 返回 在 指定 位 置 的 字符 。 
charCodeAt() 返回 在 指定 的 位 置 的 字符 的 Unicode 编码 。 
concat() 连接 字符 串 。 
fixed 以 打字 机 文本 显示 字符 串 。 
fontcolor() 使 用 指定 的 颜色 来 显示 字符 串 。 
fontsize() ”使 用 指定 的 尺寸 来 显示 字符 串 。 
fromCharCode() ”从 字符 编码 创建 一 个 字符 串 。 
indexOfO 检索 字符 串 。 
italics() 使 用 斜体 显示 字符 串 。 
lastIndexOf() 从 后 向 前 搜索 字符 串 。 
link() 将 字符 串 显 示 为 链接 。 
localeCompare() 用 本 地 特定 的 顺序 来 比较 两 个 字符 串 。 
match() 找到 一 个 或 多 个 正在 表达 式 的 匹配 。 
replace() ”替换 与 正则 表达 式 匹配 的 子 串 。 
search() 检索 与 正则 表达 式 相 匹配 的 值 。 
slice() 提取 字符 串 的 片断 ,并 在 新 的 字符 串 中 返回 被 提取 的 部 分 。 
small() 使 用 小 字号 来 显示 字符 串 。 
split() 把 字符 串 分 割 为 字符 串 数 组 。 
strike() ”使 用 删除 线 来 显示 字符 串 。 
sub() 把 字符 串 显示 为 下 标 。 
substr() 从 起 始 索 引号 提取 字符 串 中 指定 数目 的 字符 。 
substring() 提取 字符 串 中 两 个 指定 的 索引 号 之 间 的 字符 。 
sup() 把 字符 串 显示 为 上 标 。 
toLocaleLowerCase() 把 字符 串 转换 为 小 写 。 
toLocaleUpperCase() 把 字符 串 转换 为 大 写 。 
toLowerCase() 把 字符 串 转换 为 小 写 。 
toUpperCase() ”把 字符 串 转 换 为 大 写 。 
toSource() ”代表 对 象 的 源 代码 。 
toString() ”返回 字符 串 。 
valueOf() 返回 某 个 字符 串 对 象 的 原始 值 。 
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下 面 是 一 个 打字 机 效果 的 例子 ,显示 的 文字 如 打字 机 打字 一 样 一 个 一 个 地 显示 出 来 。 
例 4.9 的 程序 如 下 所 示 。 


<html> 
< head > 
<title> 打 字 机 效果 </title> 
<script language = JavaScript > 
var j=0; 
function textlist() { 
j = textlist. arguments. length; 
for (i=0; i<j; i++) 
this[ i] = textlist. arguments[ i]; 
} 
tl = new textlist("JavaScript 语言 是 由 Netscape 公司 开发 的 ", "最 初 , Netscape 公司 将 其 
命名 为 LiveScript"," 见 到 LiveScript 大 有 发 展 前 途 , Sun 公司 与 Netscape 公司 一 拍 即 合 、 签 订 协议 ， 
将 LiveScript 更 名 为 JavaScript", "从 而 造就 了 这 个 强 有 力 的 Web 开发 语言 ."); 
varx = 0; 
pos = 0; 
var 1 = tl[0]. length; 
function tp() 
{ document. typeform. typefield. value = tl[x]. substring(0, pos) + "_"; 
if(pos++ == 1) 
{ pos = 0; 
setTimeout("tp()", 1000); 
if(++x == j) x = 0; 
1 = tl[x]. length; 
} 
else 
{ setTimeout("tp()", 50); } 
} 
</script> 
</head > 
< body OnLoad = "tp()"> 
< form name = typeform> 
< textarea name = typefield rows = 10 cols = 50 > 这 里 显示 打字 机 效果 </textarea > 
</form> 
</body > 
</html> 


运行 效果 如 图 4. 12 所 示 。 

(2) Math( 数 值 计 算 ) 

如 果 要 进行 数学 运算 可 以 使 用 前 面 讲 过 的 运算 符 , 但 它们 只 能 用 来 进行 简单 的 加 减 乘 
除 等 运算 ; 如 果 要 进行 复杂 的 数学 运算 ,可 以 使 用 Math 对 象 。Math 对 象 并 不 像 Date 和 
String 那样 是 对 象 的 类 ,因此 没有 构造 函数 Math() , 像 Math. sin() 这 样 的 函数 只 是 函数 ， 
不 是 某 个 对 象 的 方法 。 无 须 创 建 , 通 过 把 Math 作为 对 象 使 用 就 可 以 调用 其 所 有 属性 和 
方法 。 
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JavaScript 语 言 是 由 Netscape 公 司 开发 的 _ 


图 4.12 打字 机 效果 


Math 的 属性 有 : 

E: 欧 拉 常量 ,自然 对 数 的 底 ( 约 等 于 2.718) 。 
LN2: 2 的 自然 对 数 ( 约 等 于 0. 693). 

LN10: 10 的 自然 对 数 ( 约 等 于 2. 302)。 

LOG2E: 以 2 为 底 的 e 的 对 数 ( 约 等 于 1. 442)。 
LOG10E: 以 10 为 底 的 e 的 对 数 ( 约 等 于 o. 434) 。 
PI: x 的 值 ( 约 等 于 3. 14159) 。 

SQRT1_2: 0.5 的 平方 根 ( 约 等 于 o.707) 。 
SQRT2: 2 的 平方 根 ( 约 等 于 1. 414)。 

Math 的 方法 有 : 

abs(x): 返回 数 的 绝对 值 。 

acos(x): 返回 数 的 反 余弦 值 。 

asin(x): 返回 数 的 反正 弦 值 。 

atan(x) : 以 介 于 一 P1/2 与 PI/2 弧度 之 间 的 数值 来 返回 x 的 反正 切 值 。 
atan2(y,x): 返回 从 x 轴 到 点 (x,y) 的 角度 ( 介 于 一 PI/2 与 P1/2 弧度 之 间 ) 。 
ceil(x) : 对 数 进行 上 舍 人 人。 

cos(x): 返回 数 的 余弦 。 

exp(x): 返回 e 的 指数 。 

floor(Cx) : 对 数 进 行 下 伟人 。 

log(x) : 返回 数 的 自然 对 数 ( 底 为 e) 。 

max(x,y): 返回 x 和 y 中 的 最 高 值 。 

min(x,y): 返回 x 和 y 中 的 最 低 值 。 

pow(x.y): BE x AY y WHE. 

random(): 返回 0 ~ 1 之 间 的 随机 数 。 
round(x); 把 数 四 舍 五 人 为 最 接近 的 整数 。 
sin(x): 返回 数 的 正弦 。 

sqrt(x): 返回 数 的 平方 根 。 
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tan(x): 返回 角 的 正切 。 

toSource() : 返回 该 对 象 的 源 代码 。 

valueOf() : 返回 Math 对 象 的 原始 值 。 

(3) Date( 日 期 ) 

Date 对 象 主要 用 于 处 理 日 期 和 时 间 。JavaScript 将 与 日 期 .时 间 相 关 的 运算 进行 抽象 、 
总 结 , 并 将 其 封装 在 Date 中 。 但 使 用 前 必须 使 用 new 运算 符 创 建 一 个 实例 ,例如 : 


mydate = new Date(); 


Date 对 象 方法 有 : 

getYear(): 返回 年 份 值 。 
getMonth(): 返回 月 份 值 。 
getDate() : 并 返回 日 期 。 
getDay(): 返回 星期 几 。 
getHours() : 返回 小 时 数 。 
getMinutes(): 返回 分 钟 数 。 
getSeconds(): 返回 秒 数 。 
getMilliseconds(): 返回 毫秒 数 。 
getTime(): 返回 完整 的 时 间 。 
setDate(); 改变 Date 对 象 的 日 期 。 
setHours(): 改变 小 时 数 。 
setMinutes(): 改变 分 钟 数 。 
setMonth(): 改变 月 份 。 
setSeconds(); 改变 秒 数 。 
setTime(): 改变 完整 的 时 间 。 
setYear(): 改变 年 份 。 


4.1.7 内 部 对 象 系统 


使 用 浏览 器 的 内 部 对 象 系统 ,可 实现 与 HTML 文档 进行 交互 。 它 的 作用 是 将 相关 元 
素 组 织 包 装 起 来 ,提供 给 程序 设计 人 员 使 用 ,从 而 减轻 编程 人 的 劳动 ,提高 设计 Web 页 面 的 
能 力 。 

常见 的 内 部 对 象 有 : 

H OX% (window); window 对 象 处 于 对 象 层次 的 最 顶端 , 它 提供 了 处 理 navigator 窗 
口 的 方法 和 属性 。 

浏览 器 对 象 (navigator) : 提供 有 关 浏 览 器 的 信息 。 

位 置 对 象 (location) : location 对 象 提供 了 与 当前 打开 的 URL 一 起 工作 的 方法 和 属性 ， 
它 是 一 个 静态 的 对 象 。 

历史 对 象 (history) : history 对 象 提供 了 与 历史 清单 有 关 的 信息 。 

文档 对 象 (document) : document 对 象 包含 了 与 文档 元 素 一 起 工作 的 对 象 , 它 将 这 些 元 
素 封 装 起 来 供 编程 人 员 使 用 。 
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window 对 象 表 示 一 个 浏览 器 窗口 或 一 个 框架 。 在 JavaScript 中 ,window 对 象 是 全 局 
对 象 ,所 有 的 表达 式 都 在 当前 的 环境 中 计算 。 也 就 是 说 ,要 引用 当前 窗口 根本 不 需要 特殊 的 
语法 ,可 以 把 那个 窗口 的 属性 作为 全 局 变量 来 使 用 。 例 如 ,可 以 只 写 document, 而 不 必 写 
window. document。 同 样 ,可 以 把 当前 窗口 对 象 的 方法 当 作 函 数 来 使 用 ,如 只 写 alert() ,而 
不 必 写 window. alert()。 除 了 上 面 列 出 的 属性 和 方法 , window 对 象 还 实现 了 核心 
JavaScript 所 定义 的 所 有 全 局 属性 和 方法 。 
下 例 是 一 个 获取 WEB 浏览 器 信息 的 例子 。 例 4. 10 的 程序 如 下 所 示 。 


<html > 

<head> 

<title> 获 取 WEB 浏览 器 信息 </title> 
<body> 

<script language = "JavaScript"> 


document. write("< h2 > 这 是 一 个 获取 Web 浏览 器 信息 的 程序 </h2 >< br >"); 


document. write(" 浏 览 器 名 称 : "+ navigator. appName + "< br>"); 
document. write(" 版 本 号 : " + navigator. appVersion + "< br >"); 
document. write( "操作 系统 平台 : "+ navigator. platform + "< br>"); 
document. write(" 系 统 的 CPU 等 级 : " + navigator. cpuClass) ; 


</script> 
</body> 
</html> 


运行 效果 如 图 4.13 所 示 。 


JavaScript 中 的 输入 可 以 通过 窗口 对 象 (window) 来 完成 ,输出 可 以 通过 文档 对 象 
(document) 来 完成 。 下 例 是 一 个 关于 输入 输出 的 例子 。 例 4. 12 的 程序 如 下 所 示 。 


<Html> 
<head> 
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这 是 一 个 获取 Web 浏 览 器 信息 的 程序 i 


浏览 器 名 称 : Microsoft Internet Explorer 

版 本 号 : 4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; 
Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3. 5. 30729; 
.NET CLR 3. 0.30729; Media Center PC 6.0; InfoPath. 2; 


.NET4. OC; ) 
操作 系统 平台 : Win32 
系统 的 CPU 等 级 : x86 


图 4.13 获取 Web 浏览 器 信息 


<title> 输 入 输出 </title> 


</head> 
<body> 
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< script language = "JavaScript"> 

var name; 

name = window. prompt(" 请 输入 您 的 姓名 :"," 张 三 "); 

document. write(" 尊 敬 的 " + name +": 欢迎 您 访问 我 们 的 网 页 !"); 


</script> 


运行 效果 如 图 4. 14 所 示 ,将 弹出 一 个 对 话 框 ,提示 用 户 输入 姓名 。 
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图 4.14 获取 Web 浏览 器 信息 


当 用 户 输 入 完 姓名 并 单 击 “确定 ”按钮 ,在 浏览 器 中 将 会 根据 用 户 输入 显示 相关 信息 。 

提示 : window. prompt 的 第 一 个 参数 显示 对 话 框 提示 信息 ,第 二 个 参数 是 默认 的 输入 
信息 。 

新 的 顶层 浏览 器 窗口 由 方法 window. open() 创 建 。 当 调用 该 方法 时 ,应 把 open() 调 用 
的 返回 值 存储 在 一 个 变量 中 ,然后 使 用 那个 变量 来 引用 新 窗口 。 窗 口 的 关闭 可 以 用 close) 
函数 来 实现 。 


4.1.8 实例 
1. 霓虹灯 效果 


下 例 是 一 个 霓虹灯 效果 的 例子 ,显示 的 文字 如 夜晚 的 霓虹灯 一 样 被 逐渐 点 亮 , 例 4. 12 
的 程序 如 下 所 示 。 


<head> 

<title> 需 虹 灯 效果 </title> 

< script language = "javascript"> 
var str = "ITAR"; 
var sLen = str. length; 
vari= 0; 
function neon() { 

itt; 
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i = (i>= sLen)?0:i; 
(i <0)?(sLen- 1) :i; 
n. innerHTML = str.substring(0,i) + "<font color = '#FF0000>" + str. substring(i, 
i+1) +"</font>" + str. substring(i+1,sLen) ; 
} 
setInterval("neon()",300) ; 
</script> 


i 


</head> 
< body> 
<div id= "n" style = "font — size:50px;color: + FF9696"></div > 
</body> 
</html> 


运行 效果 如 图 4. 15 7R, R CF MN ACHE PY BST AT — PE — Pe 
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霓虹灯 效果 


图 4.15 霓虹灯 效果 


2. 奔跑 的 文字 
下 例 是 一 个 奔跑 文字 效果 的 例子 , 例 4. 13 的 程序 如 下 所 示 。 


<html> 

<head> 

<title> 奔 跑 的 文字 </title> 

<style type = "text/css"> 

# content {position:absolute; left:0px; top:150px; 
width:100 % ; font — family: Impact; text- align:center; 
color: #336699; overflow: hidden; 

} 

</style> 

<script language = JavaScript > 

var s=0; 

var i=0; 

var m= 70; 

var d= 2000; 

var msg = new Array("Welcome to", "Baidu", "Search", "Please","go!") ; 


function changemessage( ) { 
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if (i>= msg. length){ 
location. href = ('http://www. baidu. com') ; 
return true; 
} 
txt = document. getElementBylId( "content" ); 
txt. innerHTML = msg[ i]; 
s=0; 
zoomTxt( ); 
itt; 
setTimeout("changemessage()", d); 
} 
function zoomTxt(){ 
if(s<m){ 
txt. style. fontSize = s; 
s+= 5; 
setTimeout("zoomTxt()", 30); 


} 

</script> 

</head> 

< body onload = "changemessage( ) ; "> 
<div id= "content"></div> 
</body> 

</html> 


运行 效果 如 图 4. 16 所 示 , 显 示 的 每 组 文字 如 动画 一 样 运动 起 来 ,就 像 由 远 及 近 奔 跑 


下 例 是 一 个 时 钟 效果 的 例子 ,在 运行 过 程 每 隔 一 秒 钟 ( 即 1000 上 毫秒) 显示 的 时 间 将 会 改 
变 一 次 BL 4. 14 的 程序 如 下 所 示 。 


<html> 
<head> 
<title> 时 钟 </title> 
<script language = JavaScript > 
function clock() 
{ nowtime = new Date() ; 
document. all. timerl. innerText = " 当前 时 间 是 :" + nowtime. getHours() + "If" + 
nowtime. getMinutes() + "分 " + nowtime. getSeconds() + "fb"; 
} 
</script> 
</head> 
< body onload = "setInterval( 'clock()',1000)"> 
<p id= "timerl"></p> 
</body > 
</html> 
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图 4.16 奔跑 的 文字 


运行 效果 如 图 4. 17 所 示 ,在 运行 过 程 每 隔 一 秒 钟 时 间 将 会 改变 一 次 ,从 而 达到 时 钟 的 
效果 。 
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当前 时 间 是 :18 时 27 分 27 秒 


图 4.17 时 钟 


4.2 DOM 简介 


文档 对 象 模 型 (Document Object Model. DOM) ,是 W3C 组 织 推荐 的 处 理 可 扩展 置 标 
语言 的 应 用 程序 编程 接口 (API) 。 

DOM 的 历史 可 以 追溯 至 1990 年 代 后 期 微软 与 Netscape 的 “浏览 器 大 战 ”(Browser 
Wars) ,双方 为 了 在 JavaScript 与 JScript 一 决 生死 ,于 是 大 规模 地 赋予 浏览 器 强大 的 功能 。 
微软 在 网 页 技术 上 加 入 了 不 少 专属 事物 , 既 有 VBScript, ActiveX. 又 有 微软 自家 的 
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DHTML 格式 等 ,使 不 少 网 页 使 用 非 微软 平台 及 浏览 器 无 法 正常 显示 。DOM 即 是 当时 酝 
酿 出 来 的 杰作 。 

提示 : 应 用 程序 接口 (Application Programming Interface. API) ,又 称 为 应 用 编程 接 
口 ,就 是 软件 系统 不 同 组 成 部 分 衔接 的 约定 。API 主要 目的 是 让 应 用 程序 开发 人 员 得 以 调 
用 一 组 例 程 功能 ,而 无 须 考虑 其 底层 的 源 代 码 为 何 或 理解 其 内 部 工作 机 制 的 细节 。 由 于 近 
年 来 软件 的 规模 日 益 庞大 ,常常 需要 把 复杂 的 系统 划分 成 小 的 组 成 部 分 ,编程 接口 的 设计 十 
分 重要 。 程 序 设计 的 实践 中 ,编程 接口 的 设计 首先 要 使 软件 系统 的 职责 得 到 合理 划分 。 良 
好 的 接口 设计 可 以 降低 系统 各 部 分 的 相互 依赖 ,提高 组 成 单元 的 内 聚 性 ,降低 组 成 单元 间 的 
耦合 程度 ,从 而 提高 系统 的 维护 性 和 扩展 性 。 

DOM 定义 了 访问 HTML 和 XML 文档 的 标准 , 它 是 中 立 于 平台 和 语言 的 接口 , 它 允 许 
程序 和 脚本 动态 地 访问 和 更 新 文档 的 内 容 、 结 构 和 样式 。 要 改变 页 面 的 某 个 东西 ， 
JavaScript 就 需要 获得 对 HTML 文档 中 所 有 元 素 进行 访问 的 入口 。 这 个 人 口 , 连 同 对 
HTML 元 素 进 行 添加 移动, 改变 或 移 除 的 方法 和 属性 ,都 是 通过 文档 对 象 模型 来 获 
得 的 。 

在 1998 年 , W3C 发 布 了 第 一 级 的 DOM 规范 ,到 目前 为 止 共有 3 个 DOM 级 别 ,分 别 是 
DOM Level 1,DOM Level 2,DOM Level 3, 

(1) DOM Level 1 

在 1998 年 10 月 份 成 为 W3C 的 提议 ,由 DOM 核心 与 DOM HTML 两 个 模块 组 成 。 
DOM 核心 能 映射 以 XML 为 基础 的 文档 结构 ,允许 获取 和 操作 文档 的 任意 部 分 。DOM 
HTML 通过 添加 HTML 专用 的 对 象 与 函数 对 DOM 核心 进行 了 扩展 。 

(2) DOM Level 2 

鉴于 DOM Level 1 仅 以 映射 文档 结构 为 目标 ,DOM Level 2 面向 更 为 宽广 。 通 过 对 原 
有 DOM 的 扩展 ,DOM Level 2 通过 对 象 接口 增加 了 对 鼠标 和 用 户 界面 事件 (DHTML 长 期 
支持 鼠标 与 用 户 界面 事件 ) .范围 .遍历 (重复 执行 DOM 文档 ) 和 层 释 样式 表 (CSS) 的 支持 。 
同时 也 对 DOM Level 1 的 核心 进行 了 扩展 ,从 而 可 支持 XML 命名 空间 。 

(3) DOM Level 3 

DOM Level 3 通过 引入 统一 方式 载 和 人 和 保存 文档 和 文档 验证 方法 对 DOM 进行 进一步 
扩展 ,DOM Level 3 包含 一 个 名 为 “DOM 载 人 与 保存 ”的 新 模块 ,DOM 核心 扩展 后 可 支持 
XML1.0 的 所 有 内 容 , 包 括 XML Infoset、XPath、 和 XML Base. 

当 阅 读 与 DOM 有 关 的 材料 时 ,可 能 会 遇 到 参考 DOM Level 0 的 情况 。 需 要 注意 的 是 
并 没有 标准 被 称 为 DOM Level 0, 它 仅 是 DOM 历史 上 一 个 参考 点 (DOM Level 0 被 认为 是 
在 Internet Explorer 4. 0 与 Netscape Navigator4.0 支持 的 最 早 的 DHTML). 

DOM 的 优势 主要 表现 在 : 易 用 性 强 , 使 用 DOM 时 .将 把 所 有 的 XML 文档 信息 都 存 于 
内 存 中 ,并 且 遍 历 简单 ,支持 XPath, 增 强 了 易 用 性 。 

DOM 的 缺点 主要 表现 在 : 效率 低 . 解 析 速 度 慢 , 内 存 占 用 量 过 高 ,对 于 大 文件 来 说 几乎 
不 可 能 使 用 。 另 外 效率 低 还 表现 在 大 量 地 消耗 时 间 , 因 为 使 用 DOM 进行 解析 时 ,将 为 文档 
的 每 个 element, attribute, processing-instrUCtion 和 comment 都 创建 一 个 对 象 ,这 样 在 


137 


MA 


Web 前 端 设计 一 一 HTML+CSS+jQuery 技 术 教 程 


DOM 机 制 中 所 运用 的 大 量 对 象 的 创建 和 销毁 无 疑 会 影响 其 效率 。 


总 之 ,由 于 DOM 独立 于 语言 .浏览 器 和 平台 ,因此 使 得 web 开发 者 通过 JavaScript 能 
够 轻松 地 访问 和 操作 HTML 文档 中 的 元 素 , 从 而 轻松 使 开发 出 来 的 页 面 动态 效果 更 加 灵 


活 和 人 性 化 。 


4.3 jQuery 基础 


4.3.1 初 识 jQuery 


jQuery 是 最 初 由 美国 人 John Resig 于 2006 年 初创 建 的 开源 JavaScript 项 目 , 后 来 日 
F jQuery 优秀 的 设计 以 及 开源 属性 ,吸引 了 来 自 世 界 各 地 的 众多 高 手 加 入 其 中 。 
jQuery 的 宗旨 是 write less, do more( 写 的 更 少 ,做 的 更 多 ) ,下面 通过 一 些 实例 进行 说 


明 jQuery 是 如 何 做 到 的 。 


例如 要 取得 一 个 DOM 对 象 。 
传统 的 JavaScript 代码 如 下 : 

var p1 = document. getElementById("p1") ; 
jQuery 代码 如 下 : 

var pl = $ ('#feed'); 


再 例如 例 4. 1 中 ,首先 由 写 如 下 代码 实现 welcome() PAR: 


< script language = JavaScript > 

function welcome() { 

alert(" 欢 迎 学 习 JavaScript 语言 !");} 
</script> 


然后 要 在 HTML 主 程序 中 加 入 下 面 HTML 代码 : 
<a href = "+" onclick = "welcome();"> 欢 迎 进 入 JavaScript 世界 !</a> 
而 jQuery 的 写法 如 下 : 


< Script> 

$ ("a").click(function() { 

alert(" 欢 迎 学 习 JavaScript 语言 '");}); 
</script> 


HTML 中 调用 jQuery 代码 如 下 : 


<a href = " 井 "> 欢迎 进入 JavaScript 世界 !</a> 


结果 一 样 ,但 相 比 较 而 言明 显 后 者 显得 更 加 简洁 、 易 懂 。 


jQuery 还 有 完整 丰富 的 在 线 学 习 联 机 帮助 教程 ,如 图 4. 18 所 示 , 可 参考 http: //learn. 


jquery. comy/ 。 
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jQuery Learning Center - Windows Internet Explorer 
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图 4. 18 jQuery 在 线 学 习 教程 


4.3.2 搭建 jQuery 运行 环境 


读者 可 以 从 jQuery 的 官方 网 站 (http://jquery. com/download/ # Download_jQuery， 
如 图 4. 19 所 示 ) 下 载 jQuery 的 任何 一 个 版 本 ,目前 最 新 版 本 是 jQuery2. 1. 1。jQuery2. x 
的 API 和 jQueryl. x 基本 相同 ,但 jQuery2. x 不 支持 Internet Explorer 6,Internet Explorer 7 或 
Internet Explorer 8。 鉴 于 目前 Internet Explorer 8 比较 流行 ,这 里 建议 读者 先 使 用 jQueryl. x. 


ee 
GRR | C Download jQuery | jQuery 


err 


jQuery 


write less, do more. 


Download APIDocumentation Biog Plugins Browser Support 


Downloading jQuery 


jQuery Ux 


图 4.19 下 载 jQuery 
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从 jQuery 的 官方 网 站 下 载 jQuery 库 后 ,编程 人 员 就 可 以 使 用 编程 了 (本 书 使 用 的 是 
jquery-1. 11. 1. js). 

下 面 的 例 4. 15 是 一 个 使 用 jQuery 编写 的 简单 示例 ,视图 界面 是 由 一 个 文本 框 和 一 个 
命令 按钮 组 成 。 在 文本 框 中 输入 名 字 后 , 单 击 命令 按钮 将 弹出 一 个 对 话 框 ,显示 欢迎 界面 ， 
如 图 4. 20 所 示 。 


<html> 
<head> 
<title > 欢迎 学 习 jQuery </title> 
<script type = "text/JavaScript" src = "JS/jquery- 1.11.1. js"> </script> 
< script type = "text/JavaScript"> 
$ (document). ready(function() { 
$ ("input[type = 'submit']").click(function() { 
var msg= $ ("input[name = 'name']").val()+", 欢 迎 进入 jQuery 世界 !"; 
alert(msg) ; 
D; 
H; 
</script> 
</head> 
< body> 
< input name = "name" /> <br /> 
< input type = "submit" value = "欢迎 "> 
</body> 
</html> 
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4.20 jQuery 示例 


本 例 中 引用 了 JS 目录 下 的 jQuery PE jquery-1. 11. 1.js, 再 对 命令 按钮 绑 定 单 击 处 理 函 
数 , 当 输 入 信息 后 单 击 命令 按钮 时 会 调用 处 理 函 数 ,弹出 欢迎 对 话 框 。 
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4.3.3 jQuery 实战 开发 与 应 用 


jQuery 是 一 个 轻 量 级 的 库 , 拥 有 简洁 的 语法 、 优 雅 的 代码 风格 、 强 大 的 选择 器 、 可 靠 的 
事件 处 理 机 制 `. 出 色 的 DOM 操作 、 完 善 的 跨 平 台 兼容 性 等 优点 ,从 而 吸引 了 一 批 又 一 批 的 
优秀 JavaSript 开发 人 员 转 投 其 中 。 同 时 jQuery 又 是 一 个 开源 产品 ,透明 、 高 质量 、 低 风险 。 


1. jQuery 核心 函数 


在 jQuery 中 ,所 有 的 DOM 对 象 都 将 封装 成 jQuery 对 象 ,而 且 只 有 jQquery 对 象 才能 
使 用 jQuery 的 方法 或 者 属性 来 执行 相关 的 操作 。 所 以 ,jQuery 提供 了 一 个 可 以 将 DOM 对 
象 封装 成 jQuery 对 象 的 函数 ,就 是 jQuery 核心 函数 jQuery, 也 称 为 工厂 函数 。 下 面 将 介绍 
jQuery 核心 函数 ,在 jQuery 编程 中 将 起 到 至 关 重 要 的 作用 ,而 在 实际 开发 中 用 到 最 多 的 也 
是 它们 。 

jQuery 核心 函数 有 一 个 非常 简单 的 别名 $ (美元 符号 ) ,调用 jQuery 核心 函数 时 都 可 
以 写成 $ ([arguements])。 

。 jQuery() 。 该 函数 返回 一 个 空 的 jQuery WA, 
jQuery(elements)。 该 函数 将 一 个 或 者 多 个 DOM 元 素 转化 为 jQuery WH. jQuery 
(document) 这 个 函数 也 可 以 将 XML 文档 和 window 对 象 转化 为 有 效 的 参数 。 
jQuery(callback) 。 该 函数 是 jQuery(document). ready(callback) 的 简写 ,该 函数 将 
绑 定 一 个 在 DOM 文档 加 载 完 成 后 执行 的 函数 。 页 面 中 所 有 需要 在 DOM 加 载 完 成 
时 执行 的 jQuery 操作 都 需要 包含 在 这 个 函数 中 。 
jQuery(html) 。 该 函数 根据 提供 的 HTML 标记 代码 ,动态 创建 由 jQuery 对 象 封装 
的 DOM 元 素 ,如 jQuery("<div></div>"). 
jQuery(html. props) 。 该 函数 根据 提供 的 HTML 标记 代码 ,动态 创建 由 jQuery 对 
象 封装 的 DOM 元 素 ,同时 对 该 DOM 元 素 设置 一 组 属性 .事件 等 。 
jQuery(html, [owerDocument])。 该 函数 根据 提供 的 HTML 标记 代码 ,动态 创建 
由 jQuery 对 象 封装 的 DOM 元 素 , 并 且 制 定 该 DOM 元 素 所 在 的 文档 。 
jQuery(expression, [context])。 该 函数 接受 一 个 包含 jQuery 选择 器 的 字符 串 , 然 
后 用 这 个 字符 串 去 匹配 一 个 或 多 个 元 素 。 jQuery 的 核心 功能 都 是 通过 这 个 函数 实 
现 的 。 


2. jQuery 选择 器 


jQuery 选择 器 是 jQuery 最 核心 的 部 分 ,也 是 其 根基 。 所 有 DOM 操作 .事件 操作 、Ajax 
操作 都 离 不 开 选 择 器 。 要 想 操 作 某 HTML 元 素 , 首 先 要 准确 找到 该 HTML 元 素 。 熟 练 使 
H jQuery 选择 器 可 以 在 很 大 程度 上 简化 开发 人 员 的 编程 工作 。 

jQuery 选择 器 可 以 分 为 以 下 四 类 : 

(1) 基本 选择 器 ( 表 4. 6) 

基本 选择 器 是 jQuery 选择 器 中 最 基本 也 是 最 常用 的 选择 器 。 基 本 选择 器 有 5 种 , 即 标 
签 选择 器 .ID 选择 器 、 类 选择 器 .通用 选择 器 、 群 组 选择 器 。 基 本 选择 器 通过 元 素 id class, 
标签 名 等 来 查找 DOM 元 素 。 在 网 页 中 ,每 个 id 名 称 只 能 用 一 次 ,而 class 允许 重复 使 用 。 
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R46 基本 选择 器 


选 择 器 描 g 语 法 

标签 选择 器 用 于 选择 页 面 中 已 有 的 标签 元 素 $ ("element") 

ID 选择 器 用 于 获取 某 个 具有 id 属性 的 元 素 $ ("id") 

类 选择 器 用 于 获取 某 个 具有 class 属性 的 元 素 $ ("class") 

通用 选择 器 匹配 所 有 元 素 Scr) 

群 组 选择 器 用 于 选择 所 有 指定 的 选择 器 组 合 的 结果 $ ("selector ,* .selectorN") 


(2) 层次 选择 器 ( 表 4.7) 
在 HTML 文档 中 ,每 个 元 素 总 是 处 于 DOM 节点 树 的 某 个 位 置 ,文档 层次 结构 中 元 素 
之 间 总 是 存在 某 种 层次 关系 ,比如 父子 级 关系 等 ,在 jQuery 中 ,可 以 使 用 层次 选择 器 来 获取 


相关 元 素 。 
表 4.7 层次 选择 器 
选 择 器 描 述 语 法 
子 元 素 选 择 器 用 于 给 定 父 元 素 下 查找 其 所 有 子 元 素 $ ("parent>child") 
后 代 选 择 器 用 于 给 定 的 祖先 元 素 下 匹配 所 有 后 代 元 素 $ ("ancestor descendant") 
紧邻 同辈 选择 器 用 于 匹配 紧 接 在 prev 元 素 后 的 next 元 素 $ ("prev+next") 
相 邻 同辈 选择 器 用 于 选择 某 元 素 后 的 所 有 同辈 元 素 $ C'prev~siblings") 


(3) 表单 域 选择 器 ( 表 4. 8) 
为 了 使 编程 人 员 能 够 更 加 灵活 地 操作 表单 ,jQuery 加 入 了 表单 域 选 择 器 。 通 过 表单 域 
选择 器 ,编程 人 员 能 够 非常 灵活 地 获取 表单 中 的 某 个 或 某 类 元 素 。 这 组 选择 器 都 以 一 个 冒 
号 (: ) 开 始 ,大 多 数 可 独立 使 用 。 


表 4.8 表单 域 选 择 器 


选 择 器 描 述 语 法 
:input 选择 器 用 于 选择 input textarea select, button 元 素 $(":input") 
:text 选择 器 用 于 选择 单行 文本 框 元 素 $ ("text") 
: password 选择 器 用 于 选择 密码 框 元 素 $(":password ") 
:radio 选择 器 用 于 选择 单 选 按钮 元 素 $(":radio ") 
:checkbox 选择 器 用 于 选择 复 选 框 元 素 $ ("checkbox ") 
:file 选择 器 用 于 选择 文件 域 元 素 $(":file ") 
:image 选择 器 用 于 选择 图 像 域 元 素 $ ("image ") 
: hidden 选择 器 用 于 选择 不 可 见 元 素 以 及 隐藏 域 元 素 $(":hidden ") 
:button 选择 器 用 于 选择 按钮 元 素 $(":button ") 
:submit 选择 器 用 于 选择 提交 按钮 元 素 $(":submit ") 
:reset 选择 器 用 于 选择 重 置 按钮 元 素 $ (":reset ") 

(A) 过 滤 选 择 器 


过 滤 选 择 器 是 通过 特定 的 过 滤 规 则 来 第 选 所 需 的 DOM 元 素 。 在 使 用 基本 选择 器 时 ， 
jQuery 对 象 通常 会 包含 一 组 DOM 对 象 。 而 在 实际 应 用 中 ,通常 还 要 根据 特定 条 件 从 中 得 
选 出 一 部 分 DOM 元 素 。 这 种 情况 下 ,可 以 在 基本 选择 器 的 基础 上 通过 添加 过 滤 选 择 器 来 
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完成 筛选 功能 。 过 滤 规 则 与 CSS 中 的 伪 类 选择 器 语法 相同 , 即 选择 器 都 以 一 个 冒号 (: ) 开 
始 。 根 据 过 滤 规则 ,过滤 选择 器 可 以 分 为 基本 过 滤 、 内 容 过 滤 、 可 见 性 过 滤 、 属 性 过 滤 、. 子 元 
素 过 滤 以 及 表单 对 象 属性 过 滤 。 


4. jQuery 的 DOM 操作 


DOM 操作 可 分 为 DOM Core( 核 心 ) .HTML-DOM 和 CSS-DOM, DOM Core 并 不 专 
属于 JavaScript, 任 何 一 种 支持 DOM 的 程序 设计 语言 都 可 以 使 用 。DOM Core 的 用 途 也 并 
非 仅 限于 处 理 网 页 ,也 可 以 用 来 处 理 任 何 一 种 使 用 标记 语言 写 的 文档 ,例如 XML, HTML- 
DOM 主要 用 于 提供 一 些 简明 的 记号 来 描述 各 种 HTML 元 素 的 属性 。 而 CSS-DOM 是 针 
对 CSS 的 操作 ,其 主要 作用 是 获取 和 设置 style 对 象 的 各 种 属性 ,并 通过 改变 其 属性 值 使 网 
页 呈现 各 种 不 同 的 效果 。 

在 动态 改变 HTML 文档 内 容 的 过 程 中 ,操作 文档 中 的 节点 是 最 常见 .最 频繁 的 操作 之 
一 。 如 果 能 顺利 实现 这 些 操作 ,将 能 够 灵活 快捷 地 实现 任何 想 要 的 页 面 效果 。 

下 面 介 绍 jQuery 的 DOM 操作 。 首 先 介绍 一 下 思路 ,每 一 张 网 页 都 可 以 用 DOM 表示 
出 来 ,而 每 一 份 DOM 都 可 以 被 看 作 一 棵 DOM 树 ,对 DOM 的 各 种 操作 都 围绕 这 棵 DOM 
树 展开 。 通 过 jQuery 选择 器 可 以 非常 容易 地 在 DOM 树 上 查找 元 素 节点 。 当 找到 所 需 元 
素 后 ,可 使 用 attr() 方 法 来 获取 其 各 种 属性 值 。 当 然 , 也 可 以 轻松 实现 对 元 素 节 点 的 删除 、 
复制 、 蔡 换 .遍历 等 操作 。 


5. jQuery 的 事件 


有 件 是 脚本 编程 的 灵 瑰 。JavaScript 是 事件 驱动 的 脚本 编程 语言 。 传 统 的 JavaScript 
中 ,可 以 把 事件 分 为 鼠标 事件 .键盘 事件 页面 事 件 .表单 事件 等 。jQuery 对 JavaScript 中 的 
常用 事件 进行 封装 。 通 过 对 JavaScript 事件 的 封装 ,jQuery 消除 了 各 种 浏览 器 之 间 的 差异 ， 
使 编程 人 员 编 程 时 更 加 方便 ,代码 兼容 性 更 好 。 

(1) DOM 载 人 事件 

在 JavaScript 中 ,通常 使 用 window. onload 方法 ,而 在 jQuery 中 提供 了 一 个 DOM 加 
载 完成 事件 , 即 ready 事件 。ready 事件 是 一 个 可 以 在 DOM 加 载 完成 后 执行 的 事件 , 它 可 
以 绑 定 多 个 响应 函数 。ready 事件 可 大 大 提高 Web 页 面 响应 速度 ,是 jQuery 事件 模块 中 最 
重要 的 事件 之 一 。 

ready 事 件 对 所 有 jQuery 对 象 都 有 效 ,可 以 绑 定 到 所 有 被 jQuery 对 象 封 装 过 的 DOM 
元 素 上 。 比 如 为 页 面 document 对 象 .window X% html 节点 .body 节点 .DOM 元 素 div、 
input 等 分 别 进行 document 对 象 的 绑 定 ,在 绑 定 事件 处 理 程序 中 可 以 分 别 向 页 面 输出 不 同 
的 执行 。 例 如 document 对 象 的 ready 事件 可 以 用 如 下 代码 : 

$ (document). ready(function() { 

// 编 写 代码 

» 

(2) 事件 绑 定 

当 文 档 加 载 完 毕 后 ,可 以 使 用 bind() 方 法 对 匹配 元 素 进 行事 件 的 绑 定 来 完成 某 些 操 
作 。bind() 方 法 的 语法 结构 如 下 : 
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bind(type, [data], fn) 


其 中 第 一 个 参数 是 事件 类 型 ,类 型 包括 : focus, load, unload, resize, scroll, click, dbclick, 
mousedown、mouseup、mousemove、mouseover、 select, submit, keydown, keypress 等 ,也 可 
以 是 自 定义 名 称 。 

第 二 个 参数 是 可 选 参 数 , 作 为 event. data 属性 值 传递 给 事件 对 象 的 额外 数据 对 象 。 

第 三 个 参数 是 用 来 绑 定 的 处 理 函数 。 

(3) 合成 事件 

jQuery 有 两 个 合成 事件 : hover() 方 法 和 toggle() 方 法 ,这 两 个 方法 都 属于 jQuery A 
定义 的 方法 。 

hover() 方 法 的 语法 结构 如 下 : 


hover(enter, leave); 


hover() 方 法 用 于 模拟 光标 悬 停 事 件 。 当 光标 移动 到 元 素 上 时 ,会 触发 第 一 个 函数 enter; 
当 光 标 移 出 该 元 素 时 ,会 触发 第 二 个 函数 leave。 
toggle() 方 法 的 语法 结构 如 下 : 


toggle (fnl, fn2, =, fnN); 


toggle() 方 法 用 于 模拟 鼠标 连续 单 击 事件 。 第 一 次 单 击 时 ,触发 第 一 个 函数 fn1; 第 二 次 单 
击 时 ,触发 第 二 个 函数 fn2; 以 此 类 推 。 

(4) 模拟 操作 

很 多 事件 是 用 户 必须 进行 操作 才能 触发 ,例如 单 击 按钮 可 触发 click 事件 ,但 有 时 需 通 
过 模拟 用 户 操 作 达 到 触发 事件 的 效果 。 在 jQuery 中 ,可 以 使 用 trigger() 方 法 模拟 操作 。 例 
如 如 果 想 触发 id 为 buttonl 按钮 的 click 事件 ,可 以 使 用 如 下 代码 : 


$ ('# button1'). trigger("click"); 
当 浏览 器 运行 到 该 代码 时 ,就 立刻 输出 单 击 按钮 的 效果 了 。 

trigger() 方 法 不 仅 能 触发 浏览 器 支持 的 具有 相同 名 称 的 事件 ,也 可 以 触发 自 定义 名 称 
的 事件 。trigger() 方 法 的 语法 结构 如 下 : 


trigger(type, [data]) ; 


其 中 第 一 个 参数 是 要 触发 的 事件 ; 第 二 个 参数 是 可 选 参 数 ,是 要 传递 给 事件 处 理 函 数 的 附 
件数 据 , 以 数组 形式 传递 。 


6. jQuery 的 动画 


动画 效果 是 jQuery 最 吸引 人 的 地 方 。 通 过 jQuery 的 动画 方法 ,可 以 轻松 为 网 页 添加 
非常 精彩 的 视觉 效果 ,给 用 户 一 种 全 新 的 体验 。 

(1) 基本 效果 

jQuery 动画 中 的 基本 效果 有 隐藏 .显示 和 交替 隐藏 显示 。 

hide() 方 法 可 将 被 选中 元 素 隐藏 ,hide() 方 法 的 语法 结构 如 下 : 


hide( speed, [callback]) ; 
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hide() 方 法 可 根据 指定 的 速度 speed( 单 位 : 毫秒 ) 动 态 地 改变 匹配 元 素 的 高 度 、 宽 度 和 不 透 
明度 ,从 而 以 优雅 的 动画 隐藏 匹配 元 素 。 

下 面 通过 例 4. 16 来 说 明 , 当 单 击 图 片 时 ,图 片 会 以 优雅 的 动画 慢 慢 隐藏 消失 。 如 
图 4.21 所 示 。 


<html> 
<head> 
<title> 动 态 隐藏 动画 </title> 
<script type = "text/JavaScript" src = "JS/jquery- 1.11.1. js"> </script> 
<script type = "text/JavaScript"> 
$ (document). ready(function() { 
$ ("img"). click(function() { 
$ (this). hide(7000) ; 
}) 
}) 
</script> 
</head> 
< body> 
<div>< img src = "night. bmp" /></div> 
</body> 
</html> 
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图 4.21 jQuery 动态 隐藏 动画 


show() 方 法 可 将 被 选中 的 隐藏 的 元 素 显示 出 来 ,show() 方 法 的 语法 结构 如 下 : 
show (speed, [callback]) ; 


同 hide() 方 法 一 样 ,show() 方 法 可 根据 指定 的 速度 speed( 单 位 : 毫秒 ) 动 态 地 改变 匹 


146 


VY 


Web 前 端 设计 一 一 HTML+CSS+jQuery 技 术 教程 


配 元 素 的 高 度 、 宽 度 和 不 透明 度 , 从 而 以 优雅 的 动画 将 隐藏 的 匹配 元 素 显 示 出 来 。 
toggle() 方 法 可 切换 被 选中 的 元 素 的 可 见 状态 ,toggle() 方 法 的 语法 结构 如 下 : 


toggle (speed, [callback]) ; 


toggle() 方 法 可 参考 hide() 方 法 。 
(2) 滑动 效果 
jQuery 动画 中 的 滑动 效果 包括 向 上 收缩 .向 下 展开 和 交 蔡 伸缩 。 
slideUp() 方 法 可 通过 调整 元 素 高 度 ( 向 上 减 小 ) 来 动态 隐藏 所 匹配 的 元 素 ,slideUp() 
方法 的 语法 结构 如 下 : 


slideUp( (speed, [callback]); 
第 一 个 参数 speed 的 单位 是 毫秒 ,该 动画 效果 只 调整 元 素 的 高 度 ; 第 二 个 参数 callback 是 可 
选 参数 ,表示 在 动画 完成 时 执行 的 函数 。 

下 面 通过 例 4. 17 来 说 明 , 当 单 击 图 片 时 ,图 片 会 以 优雅 的 动画 慢 慢 向 上 收缩 直至 消失 。 
如 图 4. 22 所 示 。 
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图 4.22 jQuery 动态 向 上 收缩 动画 


<html > 
<head > 
<title> 动 态 向 上 收缩 动画 </title> 
<script type = "text/JavaScript" src="JS/jquery—1.11.1.js"> 


</script> 
< script type = "text/JavaScript"> 
$ (document). ready(function() { 
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$ ("img").click(function(){ 
$ (this). slideUp(7000); 
}) 
}) 
</script> 
</head> 
< body> 
<div>< img src = "night. bmp" /></div> 
</body> 
</html> 


slideDown() 方 法 可 通过 调整 元 素 高 度 ( 向 上 减 小 ) 来 动态 隐藏 所 匹配 的 元 素 ， 
slideDown() 方 法 的 语法 结构 如 下 : 


slideDown ( (speed, [callback]); 


slideDown() 方 法 的 参数 适用 可 参照 slideUp () 方 法 。 
slideToggle() 方 法 可 通过 高 度 变化 切换 被 匹配 的 元 素 的 可 见 状态 ,toggle() 方 法 的 语 
法 结构 如 下 : 


slideToggle (speed, [callback]) ; 


slideToggle() 方 法 的 参数 适用 可 参照 slideUp() 方 法 。 

G) 淡 入 淡出 效果 

淡 入 淡出 效果 是 许多 网 站 上 最 常见 的 图 片 动画 效果 。jQuery 动画 中 的 淡 入 淡出 效果 
包括 淡 入 效果 、 淡 出 效果 和 自 定义 不 透明 度 。 

fadeIn() 方 法 可 通过 不 透明 度 的 变化 来 实现 所 匹配 元 素 的 淡 入 效果 ,fadeln() 方 法 的 语 
法 结构 如 下 : 


fadeIn ( (speed, [callback]) ; 


同样 ,第 一 个 参数 speed 的 单位 是 毫秒 ,该 动画 效果 只 调整 元 素 的 高 度 ; 第 二 个 参数 
callback 是 可 选 参数 ,表示 在 动画 完成 时 执行 的 函数 。 

下 面 通过 例 4. 18 来 说 明 , 当 页 面 被 载 和 时 ,图 片 会 在 7 秒 内 从 无 到 有 慢 慢 显示 出 来 。 
如 图 4. 23 所 示 。 


<html> 
< head > 
<title> 淡 入 动画 </title> 
<script type = "text/JavaScript" src = "JS/jquery~- 1.11.1. js"> 


</script> 
< script type = "text/JavaScript"> 
$ (document). ready(function() { 
$ ("div"). fadeIn(7000) ; 
}) 
</script> 
</head> 
< body> 
<div style = "display:none; ">< img src = "night. bmp" /></div> 
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</body> 
</html > 
(BARE - Windows Internet Explorer [erem] 
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图 4.23 jQuery 淡 入 动画 


fadeOut() 方 法 可 通过 不 透明 度 的 变化 来 实现 所 匹配 元 素 的 淡出 效果 ,fadeOut() 方 法 
的 语法 结构 如 下 : 


fadeOut ((speed, [callback]) ; 


fadeOut() 方 法 的 参数 适用 可 参照 fadeln () 方 法 。 
fadeTo() 方 法 可 通过 不 透明 度 的 渐进 变化 来 将 所 匹配 元 素 调 整 到 指定 的 不 透明 度 ， 
fadeTo( ) 方 法 的 语法 结构 如 下 : 


fadeTo ((speed, opacity ,[callback]) ; 


fadeTo() 方 法 的 第 二 个 参数 opacity RIR RI ME IE HAR AH PE (CO ~ 1.1 表示 全 部 显示 )， 
其 余 参数 适用 可 参照 fadeIn() 方 法 。 


44 Ajax 


Ajax 指 异 步 JavaScript 及 XML(Asynchronous JavaScript And XML) , 它 并 不 是 指 某 
一 种 单一 的 技术 ,而 是 一 系列 网 页 相关 应 用 相关 技术 的 有 机 结合 体 。Ajax 能 够 实现 在 网 页 
页 面 无 刷新 的 情况 下 从 服务 器 端 获取 数据 ,可 以 极 大 程度 上 改善 用 户 体验 。 

Ajax 技术 早 在 20 世纪 90 年 代 末 就 已 经 在 浏览 器 中 出 现 ,但 当时 不 是 称 为 Ajax, 最 近 
几 年 才 被 人 们 所 重视 。 最 初 , Ajax 技术 只 是 在 下 浏览 器 中 得 到 支持 ,后 来 其 他 浏览 器 如 
Firefox, Safari 等 都 开始 支持 Ajax 技术 , 慢 慢 地 开始 普及 并 流行 开 了 。 
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Ajax 基于 下 列 Web 标准 : 

(1) JavaScript 

(2) XML 

(3) HTML 

(4) CSS 

(5) DOM 

目前 ,在 Ajax 中 使 用 的 Web 标准 已 被 良好 定义 ,并 被 几乎 所 有 的 主流 浏览 器 支持 ,如 
IE, Firefox, Safari, Chome, Opera 等 。Ajax 应 用 程序 独立 于 浏览 器 和 平台 。 在 2005 年 
Ajax 被 Google 推广 开 来 (Google Suggest). Orkut, Gmail, Google Groups, Google Maps, 
Google Suggest 都 应 用 了 这 项 技术 。 

这 里 先 讨论 一 下 两 种 典型 的 客户 端 实现 方式 : 

(1) 瘦 客 户 端 。 完 全 依赖 服务 器 计算 ,客户 端 仅 仅 显 示 服 务 器 数据 。 典 型 例子 如 Web 应 
用 中 的 浏览 器 ,浏览 器 仅 负责 显示 逻辑 控制 ,客户 端 计 算 基 本 闲置 ,所 有 页 面 均 由 服务 器 生成 。 

(2) 胖 客户 端 。 客 户 端 承担 一 部 分 计算 工作 ,合理 利用 客户 端 资源 ,分 担 服务 器 计算 压 
Ji. Ajax 和 Flash 是 现在 胖 客户 端的 主流 。 

随 着 Internet 的 高 速 发 展 ,当前 Internet 上 的 用 户 和 数据 量 都 呈现 爆炸 性 增长 ,而 同时 
服务 器 端面 临 的 压力 也 随 之 增 大 ,网 络 上 传输 的 数据 也 呈现 爆炸 性 增长 ; 虽然 计算 机 及 网 
络 硬件 技术 也 比 以 前 有 所 改进 ,但 仅 通过 提升 服务 器 硬件 和 提高 网 络 带 宽 来 适应 用 户 和 数 
据 量 的 爆炸 性 增长 是 不 太 现实 的 ,一 方面 硬件 技术 的 提升 速度 远 远 无 法 满足 用 户 和 数据 量 
的 增加 , 另 一 方面 硬件 的 提升 将 会 伴随 着 成 本 的 增加 ,在 有 限 的 成 本 内 通过 提升 硬件 来 满足 
用 户 和 数据 量 的 增加 几乎 是 无 法 想象 的 。 

Ajax 技术 不 是 一 种 新 的 编程 语言 ,而 是 一 种 用 于 创建 更 好 更 快 以 及 交互 性 更 强 的 Web 
应 用 程序 的 技术 。Ajax 技术 的 核心 是 JavaScript 的 XMLHttpRequest 对 象 , 它 是 一 种 支持 
异步 请 求 的 技术 。 通 过 使 用 JavaScript 的 XMLHttpRequest 对 象 来 直接 与 服务 器 提出 请 
求 并 处 理 响 应 ，JavaScript 可 在 不 重 载 页 面 的 情况 下 与 Web 服务 器 交换 数据 。Ajax 技术 
在 浏览 器 与 Web 服务 器 之 间 使 用 异步 数据 传输 CHTTP 请 求 ) ,这 样 就 可 使 网 页 从 服务 器 
请 求 少 量 的 信息 ,而 不 是 整个 页 面 。Ajax 可 使 因特网 应 用 程序 更 小 、 更 快 .更 友好 。 

在 传统 的 JavaScript 编程 中 ,用 户 如 果 希 望 从 服务 器 上 的 文件 或 数据 库 中 得 到 任何 信 
息 , 或 者 向 服务 器 发 送信 息 的 话 ,就 必须 利用 一 个 HTML 表单 向 服务 器 GET 或 POST 数 
据 。 而 用 户 则 需要 单 击 * 提 交 ?” 按 钮 来 发 送 /获取 信息 ,等 待 服务 器 的 响应 ,然后 刷新 一 张 新 
的 页 面 。 这 个 过 程 ,页 面 可 能 一 片 空白 ,用 户 只 能 等 待 。 

通过 利用 Ajax, 通 过 JavaScript 的 XMLHttpRequest 对 象 ,直接 与 服务 器 通信 。Ajax 
使 用 XML 传输 数据 .异步 JavaScript 解析 XMLDocument 对 象 .服务 器 回 传 数据 时 不 重 绘 
页 面 , 网 络 传输 时 耗 可 以 同时 降低 ,而 且 Ajax 可 以 与 任何 服务 器 技术 进行 交互 。 但 需要 强 
调 的 是 Ajax 是 典型 的 客户 端 技术 。 

Ajax 对 浏览 器 有 一 定 依赖 ,任何 对 Ajax 的 应 用 都 建立 在 浏览 器 基础 上 。 通 过 使 用 
HTTP 请 求 ,WEB 页 可 向 服务 器 发 送 请 求 ,并 得 到 来 自 服务 器 的 响应 ,而 不 加 载 页 面 。 用 
户 可 以 停留 在 同一 个 页 面 ,而 不 会 注意 到 脚本 在 后 台 请 求 过 页 面 ,或 向 服务 器 发 送 过 数据 。 


<html> 


149 


MA 


150, Web 前端 设计 一 一 HTML+CSS+jQuery 技 术 教 程 


N 


< head > 
<title>Ajax</title> 


<script language = JavaScript > 


function AjaxFunction() 
{ 
var xmlHttp; 
try{ 
xmlHttp = new XMLHttpRequest( ) ; 
} 
catch (e) { 
try{ 
xmlHttp = new ActiveXObject("Msxm12. XMLHTTP" ) ; 
} 
catch (e) { 
try{ 
xmlHttp = new ActiveXObject ("Microsoft. XMLHTTP" ) ; 
} 
catch (e) 
{ 
alert("Your browser can not run Ajax!" 
return false; 


} 


} 
xmlHttp. onreadystatechange = function() 
{ 
if(xmlHttp. readyState == 4) 
{ 
document. myForm. time. value = xmlHttp. responseText; 
} 
} 


xmlHttp. open("GET", "servertime. asp", true); 
xmlHttp. send(nul1) ; 


} 

</script> 

</head> 

< body > 

< form name = "myForm"> 

用 户 的 姓名 : <input type = "text" name = "username" onkeyup = "AjaxFunction() ;">< br > 
服务 器 时 间 : < input type = "text" name = "time"> 

</form> 


</body> 
</html> 


下 面 编写 服务 器 端 程序 “servertime. asp”: 


<% 
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response. expires = —1 
response. write(time) 
a> 


当 用 户 在 姓名 文本 框 中 输入 姓名 时 ,在 时 间 文 本 框 中 可 在 不 加 载 页 面 的 情况 下 利用 
servertime. asp 获得 服务 器 的 时 间 。 

jQuery 中 的 Ajax 对 JavaScript 中 的 Ajax 进行 了 封装 ,jQuery 中 的 Ajax 实现 方法 最 
大 的 一 个 优势 就 是 消除 了 各 种 浏览 器 之 间 的 差异 ,提高 了 兼容 性 ,从 而 编程 人 员 不 用 再 关心 
程序 对 浏览 器 的 兼容 性 ,其 次 也 简化 了 编程 人 员 的 工作 ,不 必 编 写 大 量 代码 。 

jQuery 对 JavaScript 中 的 Ajax 进行 了 3 层 封装 : 第 1 层 封装 并 实现 了 $ .ajax() 方 法 ; 
第 2 层 封装 并 实现 了 load() 方 法 、$. get() 方 法 和 $. post() 方 法 ; 第 3 层 封装 并 实现 了 $. 
getScript() 方 法 和 $. getJSON() 方 法 。 

jQuery 中 Ajax 的 优势 还 在 于 对 整个 请 求 响应 过 程 能 够 进行 全 程 监控 ,为 此 jQuery 中 
提供 了 一 系列 全 局 事件 函数 ,能够 捕获 所 有 匹配 Ajax 事件 并 注册 回调 函数 。 这 样 , 当 请 求 
数据 量 较 大 或 服务 器 比较 繁忙 时 ,页面 可 能 长 时 间 无 反应 ,用 户 可 能 会 无 所 适 从 ,这 时 可 在 
页 面 中 给 用 户 一 个 提示 ,以 减少 用 户 的 焦虑 感 ,增强 人 机 交互 的 人 性 化 。 

世界 上 没有 完美 的 事物 , Ajax 也 不 是 一 种 完美 的 技术 ,jQuery 的 出 现 有 效 地 补充 了 
Ajax 技术 的 不 足 之 处 。 


小 结 


本 章 主 要 介绍 JavaScript 和 jQuery 中 的 基本 知识 ,并 简单 介绍 了 Ajax ER. 
JavaScript 语言 是 基础 ,而 jQuery 是 其 上 非常 炊 眼 的 一 休 鲜 花 。jQuery 是 最 近 几 年 非常 流 
利 , 非 常 火 的 一 种 JavaScript 库 , 甚 至 还 出 现 了 基于 jQuery 框架 在 移动 设备 上 应 用 的 
jQuery Mobile 项 目 。 

本 章 从 介绍 JavaScript 的 基本 知识 入 手 , 讲 解 了 数据 类 型 操作 符 \ 流 程控 制 以 及 命名 
空间 的 声明 等 内 容 。 并 且 通 过 一 些 具体 的 实例 ,让 读者 了 解 开 发 JavaScript 和 jQuery 程序 
的 过 程 。Ajax 并 不 是 什么 新 鲜 事 物 , 作 为 客户 端 技术 ,Ajax 利用 异步 服务 器 交互 、 服 务 器 
回 传 数据 不 重 绘 页 面 , 可 以 减轻 服务 器 端 压力 和 网 络 传输 时 耗 。 但 Ajax 技术 不 能 滥用 , 否 
则 可 能 会 适得其反 。 


习题 


1. JavaScript 语言 最 初 是 由 创建 的 ,一 开始 命名 是 
2. JavaScript 语言 的 基本 数据 类 型 有 
3. jQuery 的 宗旨 是 
4. Ajax 的 全 称 是 
5. 我 国 古 代数 学 家 张 丘 建 在 ( 算 经 ) 中 提出 了 著名 的 “ 百 钱 百 鸡 问题 ":“ 鸡 俩 一 ,值钱 
五 ; 鸡 母 一 ,值钱 三 ; 鸡 雏 三 ,值钱 一 ; ARRAY. ESL: 一 只 公鸡 
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卖 5 枚 钱 ,一 只 母 鸡 卖 3 枚 钱 ,三 只 小 鸡 卖 1 枚 钱 ,用 100 枚 钱 买 100 只 鸡 , 能 买 到 公鸡 , 母 
鸡 . 小 鸡 各 多 少 只 ? 请 用 JavaScript 语言 设计 程序 求解 。 

6. 使 用 JavaScript 语言 编写 程序 ,输出 1 一 10 的 平方 和 ,要 求 分 别 使 用 3 种 不 同 的 循环 
语句 实现 : 

(1) 使 用 for 语句 实现 。 

(2) 使 用 while 语句 实现 。 

(3) 使 用 do…while 语句 实现 。 

7. 请 使 用 jQuery 编写 一 个 图 片 动态 隐藏 动画 效果 的 Web 页 面 。 


Photoshop2 fill | 


如 果 一 个 网 站 添加 了 精心 设计 的 图 片 作 点 级 ,会 使 网 站 看 上 去 更 加 美观 漂亮 ,吸引 用 户 
的 眼球 。 因 此 ,一 个 好 的 网 页 设计 人 员 除 了 掌握 前 几 章 必 须 的 基础 知识 外 ,还 需要 掌握 网 页 
图 像 的 基本 处 理 。 

用 于 网 页 图 像 处 理 的 软件 有 很 多 .但 是 使 用 最 多 ,功能 最 强大 的 是 Photoshop, ,简称 为 
PS. Photoshop 是 一 款 由 Adobe 公司 开发 的 平面 图 像 处 理 软 件 ,主要 用 于 平面 设计 ,广告 
摄影 .影像 创意 、 网 页 制作 、 后 期 修饰 ,视觉 创意 、 界 面 设计 等 领域 。Adobe 公司 于 2003 年 
10 月 发 布 了 Photoshop 8 并 更 名 为 CS, 此 后 从 2003 到 2012 年 期 间 正 式 发 行 的 Photoshop 
软件 均 以 CS 作为 其 版 本 编号 前 级 。2013 年 7 H Adobe 公司 发 布 的 最 新 版 本 Photoshop 
CC(Creative Cloud) 则 是 采用 了 目前 最 流行 的 云 服 务 技术 。 本 书 所 有 实例 均 以 2007 年 4 月 
发 行 的 Photoshop CS3 为 版 本 详细 讲解 图 像 处 理 基 本 方法 。 

由 于 Photoshop 主要 处 理 的 是 由 像素 构成 的 数字 及 图 像 ,所 以 Photoshop 支持 的 图 像 
格式 大 多 是 位 图 格式 ,例如 JPEG TIFF .GIF .BMP、PNG 等 。 其 中 ,JPEG .GIF 和 PNG 图 
像 格式 在 网 页 设计 中 会 经 常用 到 ,JPEG 和 GIF 图 像 在 存储 时 经 过 压缩 处 理 , 文 件 通常 比较 
小 ,而 PNG 图 像 格 式 则 是 Fireworks 图 像 处 理 软件 专用 的 一 种 图 像 格 式 。 除 此 之 外 ， 
Photoshop 还 有 自己 专用 的 图 像 格式 PSD. PSD 格式 最 大 的 优点 就 是 可 以 存储 图 像 处 理 的 
所 有 细节 信息 ,例如 图 层 . 通 道 . 蒙 版 和 色彩 信息 ,最 大 程度 保留 了 图 像 原始 信息 ,非常 有 利 
于 对 未 完成 或 需要 反复 修改 的 图 像 进行 保存 ,缺点 也 是 显而易见 的 ,就 是 存储 容量 大 。 


6.1 Photoshop 工作 环境 


双击 国 图 标 ,启动 Photoshop CS3 ,进入 Photoshop CS3 工作 界面 ,如 图 5. 1 所 示 。 

Photoshop CS3 工作 界面 由 以 下 几 部 分 组 成 ， 

。 菜单 提供 了 Photoshop 图 像 处 理 的 全 部 功能 。 

。 属性 栏 又 称 为 工具 选项 栏 ,根据 所 选 的 工具 进行 相应 的 参数 设置 。 

。 工具 箱 提供 了 图 像 处理 的 基本 工具 ,主要 有 图 像 选 择 工 具 、 图 像 绘制 /修饰 工具 、 文 
字 编 辑 工 具 、 色 彩 填充 工具 以 及 辅助 工具 等 。 

。 图 像 窗口 也 称 为 画布 窗口 ,主要 用 来 显示 图 像 文件 。Photoshop 支持 同时 打开 多 个 
图 像 文件 ,可 以 利用 图 像 窗口 的 最 大 .最 小 和 关闭 按钮 对 其 进行 管理 。 

。 浮动 面板 提供 图 像 处 理 相 关 的 辅助 功能 ,主要 有 导航 器 面板 .直方 图 面板 .颜色 样式 
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图 像 窗口 
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图 5.1 Photoshop CS3 工作 界面 


面板 .历史 记录 面板 .图 层面 板 等 ,所 有 浮动 面板 都 可 以 通过 单 击 “ 窗 口 " 菜 单 中 的 菜 
单项 打开 或 关闭 。 其 中 ,导航 器 面板 主要 用 于 对 整个 图 像 的 导航 浏览 ,可 以 通过 调 
整 面板 下 方 的 活动 滑 块 改变 图 像 窗 口中 的 图 像 显示 比例 ,面板 中 的 红色 显示 框 始终 
定位 到 当前 图 像 窗 口中 显示 的 图 像 。 当 显示 的 图 像 大 于 图 像 窗口 时 可 用 鼠标 拖 动 
面板 内 红色 显示 框 改变 图 像 在 窗口 中 的 显示 区 域 。 历 史记 录 面 板 可 以 记录 图 像 处 
理 过 程 中 的 每 一 步 操作 ,存储 的 操作 是 有 限 的 。 设 计 人 员 可 以 在 历史 记录 面板 通过 
拖 动 滑 块 轻松 进行 撤销 操作 。 导 航 器 面板 和 历史 记录 面板 如 图 5. 2 和 图 5. 3 所 示 。 


| 导航 器 x | 直方 图 | 信息 | 


| 历史 记录 x Late | 
ed M62260.p6 
BEES 
i EWE 
| | & 和 贴 
bp 移动 
B sess 


amos 


图 5.2 导航 器 面板 图 5.3 历史 记录 面板 


(5.2 Photoshop 基本 工具 
Photoshop CS3 中 的 工具 箱 提供 了 图 像 处 理 的 各 种 基本 工具 ,按照 功能 可 分 为 : 图 像 
选区 工具 、 图 像 绘画 和 修饰 工具 以 及 其 他 辅助 工具 。 
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5.2.1 图 像 选区 


使 用 Photoshop 对 图 像 进 行 处 理 的 时 候 大 多 数 并 不 是 针对 整 幅 图 像 ,这 就 需要 使 用 工 
具 箱 中 的 选区 工具 将 图 像 中 需要 处 理 的 区 域 创建 为 选区 ,然后 再 执行 其 他 操作 。 


1. 选区 创建 


Photoshop CS3 提供 了 多 种 选区 工具 以 方便 快速 创建 不 同形 状 的 选区 ,选区 一 旦 创建 
成 功 其 边界 会 以 虚线 框 显 示 。 如 果 需 要 取消 当前 选区 ,可 以 同时 按 住 键盘 上 的 Ctrl+D 键 。 

(1) 选 框 工具 组 

选 框 工具 组 是 创建 图 像 选区 的 最 基本 的 工具 ,可 以 用 来 创建 长 方形 、 正 方形 、 椭 圆 和 正 
圆 等 规则 形状 选区 , 它 包 括 一 组 选区 工具 : 矩形 选 框 工具 局、 椭圆 选 框 工具 O .单行 选 框 
工具 s 和 单列 选 框 工具 io 

将 鼠标 移 到 工具 箱 中 和 矩形 选 框 工具 图 标 E , 单 击 鼠 标 左 键 按 
住 1 秒 钟 ,显示 弹出 菜单 , 单 击 对 应 图 标 即 可 选中 该 工具 ,如 图 5. 4 
所 示 。 i 单列 选 杠 工具 

。 矩形 或 槛 圆 选 框 工 具 

使 用 矩形 或 椭圆 选 框 工具 可 以 创建 外 形 为 矩形 或 椭圆 形状 的 
选区 ,具体 操作 过 程 如 下 : 

O 在 工具 箱 中 选择 矩形 选 框 工具 己 或 椭圆 选 框 工具 O. 

© 在 图 像 窗口 中 需要 创建 为 选区 的 图 像 区 域 中 单 击 鼠 标 左 键 并 拖 动 鼠标 即 可 绘制 出 
矩形 或 椭圆 选区 ,选区 的 边界 会 以 闪 动 的 虚线 框 表示 ,如 图 5.5 所 示 。 

如 果 想 创建 正方 形 或 圆 形 的 选区 ,需要 在 创建 选区 单 击 鼠 标 左 键 并 在 拖 动 的 同时 按 住 
Shift 键 。 


图 5.4 选 框 工 具 组 工具 


图 5.5 创建 矩形 或 顶 圆 选区 


。， 单行 或 单列 选 框 工具 

使 用 单行 或 单列 选 框 工 具 可 以 创建 只 有 一 个 像素 高 的 行 (单行 ) 或 一 个 像素 宽 的 列 ( 生 
列 ) 的 形状 的 选区 ,具体 操作 过 程 如 下 : 

O 在 工具 箱 中 选择 单行 选 框 工具 -= 或 单列 选 框 工具 i. 

© 在 图 像 窗 口中 单 击 鼠标 左 键 ,在 单 击 的 位 置 自动 创建 单行 或 单列 选区 ,如 图 5. 6 所 示 。 
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图 5.6 创建 单行 或 单列 选区 


(2) 套 索 工具 组 
套 索 工具 组 常用 来 创建 外 形 为 任意 不 规则 形状 的 选区 , 它 包 括 一 组 工具 : 套 索 工具 
I ot © .多 边 形 套 索 工具 另 和 磁性 套 索 工具 办。 
ieee: 将 鼠标 移 到 工具 箱 中 套 索 工 具 图 标 O , 单 击 鼠 标 左 键 按 住 1 
秒 钟 ,显示 弹出 菜单 , 单 击 对 应 图 标 即 可 选中 该 工具 ,如 图 5. 7 
图 5.7 套 索 工具 组 工具 所 示 。 
提示 : 一 旦 选中 相应 的 套 索 工具 ,鼠标 就 会 自动 变 成 该 工具 
图 标的 形状 ,进入 选区 创建 状态 ,如 果 想 退出 ,只 需要 双击 鼠标 左 键 , 套 索 工 具 会 自动 创建 当 
前 鼠标 位 置 到 起 点 的 闭合 选区 ,此 时 按 住 键盘 上 的 Ctrl 十 D 键 取消 选区 , 即 可 重新 选取 。 
。 ERIR 
如 果 要 选取 的 图 像 轮廓 为 任意 不 规则 形状 ,可 使 用 套 索 工具 创建 该 选区 ,具体 操作 过 程 
WTF: 
O 在 工具 箱 中 选择 套 索 工具 多 。 
© 在 图 像 窗 口中 单 击 鼠 标 左 键 沿 着 要 选取 图 像 轮廓 边缘 拖 动 鼠 标 ,此 时 鼠标 变 成 O 
形状 。 
© 当 拖 动 鼠标 回 到 起 点 位 置 时 , 松 开 鼠标 左 键 , 即 可 建立 一 个 该 图 像 轮廓 形状 的 不 规 
则 选区 ,如 图 5. 8 所 示 。 
。 多 边 形 套 索 工 具 
如 果 要 选取 的 图 像 边缘 多 由 直线 连接 的 不 规则 形状 ,可 使 用 多 边 形 套 索 工 具 创 建 该 选 
区 ,具体 操作 过 程 如 下 : 
O 在 工具 箱 中 选择 多 边 形 套 索 工具 另 。 
© 在 图 像 窗口 中 沿 着 要 选取 的 图 像 轮廓 单 击 鼠 标 左 键 作为 起 始点 ,此 时 鼠标 变 成 及 
形状 。 然 后 移动 鼠标 到 需要 改变 方向 的 位 置 单 击 鼠 标 ,插入 锚 点 ,Photoshop 会 用 直线 将 这 
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图 5.8 使 用 套 索 工具 创建 选区 


些 插入 的 锚 点 连接 起 来 。 
© 当 移 动 鼠 标 回 到 起 点 位 置 时 ,鼠标 右 下 角 出 现 小 圆圈 , 单 击 鼠 标 左 键 ,此 时 自动 建立 
封闭 的 不 规则 多 边 形 选 区 ,如 图 5.9 所 示 。 


。 磁性 形 套 索 了 
如 果 要 选取 的 图 


IEHAG0565- jpg @ 33.3% (RGB/8) 


图 5.9 使 用 多 边 形 套 索 工 具 创建 选区 


CLH 
像 边 缘 与 周围 图 像 的 颜色 对 比 鲜明 ,可 以 使 用 磁性 套 索 工具 快速 、 准 确 


地 选取 。 具 体操 作 过 程 如 下 : 
O 在 工具 箱 中 选择 磁性 套 索 工具 办 。 


© 在 图 像 窗口 


P 沿 着 要 选取 的 图 像 边 缘 移动 鼠标 ,此 时 鼠标 自动 变 成 思 形 状 。 磁 性 
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套 索 工具 会 自动 对 边界 进行 分 析 插 入 锚 点 ,此 时 不 需要 按 住 鼠标 按键 。 
© 当 移动 鼠标 回 到 起 点 时 ,鼠标 右 下 角 出 现 一 个 小 圆圈 , 单 击 鼠标 左 键 即 可 创建 选区 ， 
如 图 5. 10 所 示 。 


mm INAG2020. jpg @ 25%(RGB/8) 


图 5. 10 使 用 磁性 套 索 工 具 创 建 选区 


在 使 用 磁性 套 索 工具 时 ,可 以 通过 设置 该 工具 属性 栏 的 “对 比 度 "” 和 * 频 率 ” 参 数 提高 选 
取 的 准确 度 , 如 图 5. 11 所 示 。 


$. 


Barm | 羽化 : [0 px Janea | a: Ope 对 比 度 : [50% | 频率 : [57 | 


图 5.11 “对 比 度 ”" 和 “频率 ”参数 设置 


对 比 度 : 取 值 范围 是 1% ~ 100% ,用 来 设置 磁性 套 索 工具 边缘 图 像 检测 的 灵敏 度 。 如 
果 要 选取 的 图 像 边界 颜色 对 比较 强烈 ,需要 设置 较 高 的 百分数 值 。 反 之 , 则 输入 较 低 的 百 分 
数值 ,默认 值 为 10% 。 

频率 取 值 范围 是 0 一 100, 用 来 设置 添加 到 路 径 中 锚 点 的 密度 。 数 值 越 大 ,进行 边界 分 
析 时 自动 插入 的 锚 点 就 越 多 ,选取 的 图 像 边缘 准确 度 就 越 高 。 因 此 ,如 果 要 选取 的 图 像 边缘 
比较 复杂 ,就 需要 设置 较 高 的 数值 ,增加 较 多 的 锚 点 来 提高 选取 图 像 边 缘 的 准确 性 。 默 认 值 
为 57。 

(3) 魔 棒 工 具 组 

为 了 方便 快速 创建 不 规则 选区 ,Photoshop 还 提供 了 魔 棒 工 具 组 工具 。 它 包括 两 个 工 


A ERAIA w A. 快速 选择 工具 A 和 魔 棒 工 具 交 。 
Ee W 将 鼠标 移 到 工具 箱 中 魔 棒 工 具 图 标 A , 单 击 鼠 标 左 键 按 住 1 
图 5.12 RETRATA 秒 钟 ,显示 弹出 菜单 , 单 击 对 应 图 标 即 可 选中 该 工具 ,如 图 5. 12 
所 示 。 


。 快速 选择 工具 

快速 选择 工具 是 从 Photoshop CS3 版 本 开始 增加 的 一 个 工具 , 它 可 以 通过 调整 画笔 的 
直径 、 硬 度 和 间距 等 参数 而 快速 控制 选择 区 域 的 大 小 。 

一 般 来 说 ,画笔 直径 设置 越 大 ,选择 区 域 就 大 ,选取 的 效率 就 高 ,但 选择 粗糙 ,容易 多 选 ; 
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相反 ,小 画笔 选择 慢 , 但 得 到 的 边缘 精确 度 较 高 。 画 笔 的 直径 参数 是 通过 快速 选择 工具 的 属 
性 栏 中 “画笔 ”进行 设置 ,如 图 5. 13 所 示 。 


Be: 35px 
硬度 100% 
(a 
jE: 25% 
SRY 
i tly 图 度 : | 100% 


9 q ampo 


Raa | m: e x [me Ea 
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图 5.13 快速 选择 工具 “画笔 "参数 设置 


在 快速 选择 工具 的 属性 栏 中 还 可 以 设置 选区 方式 。 设 置 选区 方式 有 利于 调整 选区 大 
小 ,使 创建 的 选区 更 精确 。 

新 建 选区 : 单 击 s, 图 标 ,每 次 单 击 鼠 标 时 都 会 自动 创建 新 选区 。 

增加 选区 : 单 击 八 图 标 ,每 次 单 击 鼠 标 时 都 会 将 当前 区 域 自动 添加 到 已 有 选区 中 。 

减 去 选区 : TGS 图 标 ,每 次 单 击 鼠 标 时 都 会 从 已 有 选区 中 减 去 当前 区 域 。 

在 使 用 快速 选择 工具 创建 选区 时 ,鼠标 会 变 成 “十 "字形 状 ,此 时 只 要 单 击 同时 拖 动 鼠 
标 ,所 建 选区 会 向 外 自动 扩展 并 查找 和 跟随 图 像 中 定义 的 边缘 ,如 图 5. 14 所 示 。 


图 5.14 使 用 快速 选择 工具 创建 选区 


。 魔 棒 工 具 

如 果 要 选取 的 图 像 区 域 颜 色 比 较 相 近 , 可 以 使 用 魔 棒 工具 。 魔 棒 工 具 是 基于 图 像 中 相 
邻 像素 的 颜色 近似 程度 来 进行 选择 的 。 

魔 棒 工具 的 属性 栏 中 “ 容 差 " 和 “连续 ”参数 对 设置 选区 很 有 帮助 ,如 图 5. 15 所 示 。 

容 差 : 用 来 设置 选取 区 域 的 颜色 近似 程度 。 取 值 范 围 是 0~255, 默 认 值 为 32。 值 越 
小 ,选取 的 区 域 中 颜色 越 接 近 , 值 越 大 ,选取 的 区 域 中 颜色 越 多 ,选取 范围 就 越 大 。 
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V4 
连续 : 用 来 设置 要 选取 的 区 域 是 否 连接 起 来 形成 一 片 。 如 果 取 消 选中 该 选项 , 则 会 将 
当前 图 像 中 所 有 颜色 相近 的 区 域 设置 为 选区 。 


A- (OMS ， 容 差 : |32 | 回 消除 锯齿 回 连续 


图 5.15 魔 棒 工 具 “ 容 差 " 和 “连续 "参数 设置 


在 使 用 魔 棒 工具 创建 选区 时 ,鼠标 会 变 成 不 形状 ,设置 好 “ 容 差 "参数 ,在 需要 创建 为 
选区 的 位 置 单 击 鼠 标 即 可 ,如 图 5. 16 所 示 。 


m IMAG2169. jpg @ 25% (RGB/8) 


图 5.16 使 用 魔 棒 工 具 创建 选区 


提示 : 魔 棒 工 具 是 通过 容 差 值 来 调节 选择 区 域 ,一 次 只 能 选择 一片" 区域。 如 果 想 选 
择 整 个 图 像 中 相似 的 颜色 区 域 , 可 以 先 用 魔 棒 来 选择 某 一 块 颜色 ,然后 在 菜单 里 选择 "选择 "一 
“选取 相似 ” 即 可 。 


2. 选区 操作 


有 了 时候 要 选取 的 图 像 比较 复杂 ,不 是 一 次 就 能 得 到 所 需 的 选区 ,需要 进一步 对 初步 选 定 
的 区 域 进行 各 种 调整 操作 ,以 便 符合 最 终 需 要 。 这 就 需要 对 选区 进行 操作 。 

选区 的 基本 操作 包括 : 移动 选区 、 增 减 选区 范围 消除 锯齿 和 羽化 选区 四 部 分 。 

(1) 移动 选区 

移动 选区 只 是 移动 选区 的 虚线 边框 。 移 动 选区 之 前 要 确保 已 经 选择 了 相应 的 选 
具 , 然 后 将 鼠标 移 到 选区 内 ,鼠标 变 成 片 ; 形状 ,此 时 单 击 鼠 标 左 键 并 拖 动 即 可 移动 选区 。 

(2) 增 减 选区 范围 

增 减 选区 范围 目的 是 要 选取 的 图 像 区 域 更 加 符合 需求 ,提高 选取 的 精确 度 ,主要 包括 四 
种 选区 操作 : D PRR Dy 添加 选区 、 品 选区 相 减 和 园 选区 相交 ,可 以 通过 单 击 选 区 工 


区 


L 
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属性 栏 中 对 应 图 标 完 成 设置 。 增 减 选区 范围 后 的 效果 如 图 5. 17 所 示 。 
新 建 选 区 : 建立 新 的 选区 ,这 是 选区 工具 的 默认 设置 。 

添加 选区 : 将 当前 选区 与 原 有 选区 进行 合并 ,扩大 选区 范围 。 

减 : 从 原 有 选区 中 剔除 当前 选区 ,缩小 选区 范围 。 
交 : 将 当前 选区 和 原 有 选区 相交 的 区 域 保留 下 来 形成 新 的 选区 。 


(A) 选区 相 减 后 的 效果 (e) 选区 相交 的 过 程 (A 选区 相交 后 的 效果 


图 5.17 增 减 选区 范围 后 的 效果 


提示 : 在 使 用 选区 工具 增 减 选区 范围 时 ,应 首先 选中 对 应 的 选区 工具 ,然后 在 该 工具 的 
属性 栏 中 单 击 对 应 图 标 设置 选区 操作 , 接 下 来 就 可 以 进行 图 像 选取 操作 了 。 对 比较 复杂 的 
图 像 进行 选取 时 ,可 能 会 联合 使 用 多 个 选区 工具 ,并 反复 对 所 选区 域 进行 增 减 选区 范围 
操作 。 

(3) 消除 锯齿 

在 使 用 选区 工具 时 ,属性 栏 中 一 般 都 会 出 现 消除 锯齿 选项 。 该 选项 用 于 消除 选区 边缘 
的 锯齿 ,使 创建 的 选区 边缘 变 得 比较 平滑 。 默 认 情 况 下 ,该 选项 是 处 于 选中 状态 。 

(4) 羽化 选区 

在 进行 图 像 合 成 时 ,为 了 让 创建 的 选区 边缘 变 得 比较 柔和 ,使 选区 内 的 图 像 能 很 好 地 与 
外 部 其 他 图 像 自然 过 渡 ,达到 自然 融合 的 效果 ,需要 对 选区 进行 羽化 操作 。 图 像 边缘 过 渡 的 
宽度 称 为 羽化 半径 ,单位 为 像素 。 图 像 羽化 后 的 效果 如 图 5. 18 所 示 。 

在 Photoshop 中 ,羽化 选区 操作 可 分 为 两 种 情况 : 四 在 创建 选区 前 设置 羽化 半径 ,这 需 
要 在 选区 工具 的 属性 栏 中 对 羽化 半径 进行 设置 ,默认 情况 下 ,其 值 为 0; @ 在 创建 选区 后 再 
进行 羽化 ,这 需要 在 当前 创建 的 选区 中 单 击 鼠 标 右 键 ,弹出 的 菜单 中 选择 “羽化 ”, 然 后 在 “ 羽 
化 选区 ”对话 框 中 设置 羽化 半径 ,如 图 5. 19 所 示 。 
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m IMAGO843. jpg @ 25% (AE 2, R... DR 


羽化 半径 (R): | 目 Rer 


图 5.18 羽化 效果 图 5.19 羽化 半径 设置 


5.2.2 图 像 绘画 与 修饰 

Photoshop 工具 箱 中 除了 前 一 小 节 介 绍 的 选区 工具 外 ,还 有 用 于 图 像 绘 画 与 修饰 的 工 
具 , 主 要 包括 画笔 工具 组 ,历史 画笔 工具 文字 工具 ,填充 工具 ARTE TANKER 
修复 和 修饰 工具 ,下 面 分 别 介绍 。 

1. 画笔 工具 组 

画笔 工具 组 主要 用 来 辅助 绘图 ,精确 绘图 需要 使 用 钢笔 工具 。Photoshop 预 设 了 多 种 
笔 刷 效果 ,可 以 使 用 画笔 工具 绘制 出 各 种 效果 , 它 包 括 一 组 工具 : 画笔 工具 之、 铅笔 工具 


2 和 颜色 替换 工具 容 。 
将 鼠标 移 到 工具 箱 中 画笔 工具 图 标  , 单 击 鼠 标 左 键 按 住 1 


= /BZIR 3 
Jee ons 。 秒 钟 ,显示 弹出 菜单 , 单 击 对 应 图 标 即 可 选中 该 工具 ,如 图 5. 20 


所 示 。 
图 5.20 画笔 工具 组 工具 (1) 画笔 工具 
画笔 工具 绘制 出 的 线条 更 加 柔和 ,其 效果 如 同 毛 笔 绘制 的 线 

条 。 使 用 画笔 工具 需要 在 属性 栏 中 设置 “不 透明 度 " 和 “流量 "参数 。 要 想 设 置 画 笔 的 大 小 需 
要 在 属性 栏 中 单 击 “画笔 > 右 侧 的 下 拉 箭 头 ,在 弹出 的 面板 中 设置 画笔 主 直径 、 硬 度 以 及 笔 
刷 。 画 笔 工 具 的 参数 设置 如 图 5. 21 所 示 。 

不 透明 度 : 用 来 设置 绘制 线条 的 不 透明 效果 。 

流量 : 用 来 设置 绘制 线条 的 浓淡 效果 。 

EH: 用 来 设置 画笔 的 大 小 ,单位 为 像素 。 

BERE: 用 来 设置 画笔 的 边缘 柔和 程度 。 其 值 为 百分数 ,百分比 越 低 , 画 笔 绘制 出 的 线条 
边缘 越 模糊 。 反 之 , 则 绘制 出 的 线条 边缘 越 清 晰 。 

笔 刷 : Photoshop 自 带 有 多 种 笔 刷 效果 ,可 以 绘制 各 种 效果 的 线条 。 

使 用 画笔 工具 绘制 图 像 时 ,应 首先 在 工具 箱 中 选中 该 工具 ,然后 在 属性 栏 中 设 定好 相关 
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图 5.21 画笔 工具 的 参数 设置 
参数 ,在 图 像 窗口 中 单 击 鼠标 左 键 移动 鼠标 。 在 单 次 操作 中 , 即 单 击 鼠 标 左 键 绘制 不 松 开 ， 
流量 具有 颜色 释 加 属性 ,而 不 透明 度 没有 。 使 用 画笔 工具 绘制 线条 效果 如 图 5. 22 所 示 。 


硬度 为 100% 

硬度 为 30% 

流量 为 30%， 不 透明 度 为 100% 
流量 为 100%， 不 透明 度 为 30% 


Nils iad 使 用 笔 刷 绘制 小 草 和 五 角 星 


从 人 内 次 


图 5.22 使 用 画笔 工具 绘制 线条 


除了 自 带 的 笔 刷 效果 外 ,如 果 想 要 使 用 自 定义 的 图 案 作 为 笔 刷 ,需要 首先 定义 画笔 预 
设 。 方 法 如 下 : 

O 使 用 任意 选区 工具 选中 需要 定义 为 笔 刷 的 图 案 区 域 。 

@ 选择 菜单 “编辑 ”一 “定义 画笔 预 设 ”, 在 弹出 的 “画笔 名 称 ” 对 话 框 中 自 定义 笔 刷 名 
称 , 单 击 “ 确 定 ” 按 钮 。Photoshop 会 将 选区 中 的 图 案 作 为 自 定义 的 笔 刷 效 果 添 加 到 画笔 工 
有 具 中 。 然 后 再 使 用 画笔 工具 时 ,就 可 以 在 弹出 面板 中 选择 该 笔 刷 。 使 用 自 定义 笔 刷 绘制 效 
果 如 图 5. 23 所 示 。 

(2) 铅笔 工具 

与 画笔 工具 不 同 , 铅 笔 工 具 常 用 来 绘制 比较 硬朗 的 线条 ,其 使 用 方法 和 画笔 工具 类 似 ， 
在 属性 栏 中 设置 好 铅笔 的 直径 和 硬度 参数 就 可 以 绘制 ,如 图 5. 24 所 示 。 

(3) 颜色 替换 工具 

简单 来 说 ,颜色 替换 工具 就 是 将 图 像 中 的 某 些 特定 颜色 替换 成 其 他 颜色 。 具 体操 作 过 
程 如 下 : 

O 在 图 像 窗口 中 ,使 用 选区 工具 将 需要 替换 的 颜色 区 域 创 建 为 选区 。 
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六 未 标题 -1 @ 100% (RGB/B) 


(a) 创建 选区 (b) 使 用 自 定义 笔 刷 绘制 
图 5.23 使 用 自 定义 笔 刷 绘 制 


图 5.24 铅笔 工具 的 参数 设置 


© 在 工具 箱 中 , 单 击 前 景色 /背景 色 图 标量 ,在 弹出 的 “前 景色 ”对话 框 中 设置 需要 替 
换 的 颜色 ( 即 前 景色 ) 。 

O 在 工具 箱 中 选择 颜色 替换 工具 D 。 然 后 在 选 定 的 区 域内 , 单 击 鼠 标 左 键 进行 移动 ， 
选区 内 的 颜色 即 被 蔡 换 成 前 景色 。 使 用 颜色 替换 工具 替换 图 像 颜 色 效果 如 图 5. 25 所 示 。 


(a) 设置 蔡 换 颜色 (前 景色 ) (b) 替换 选区 内 的 颜色 
图 5.25 使 用 颜色 替换 工具 替换 图 像 颜 色 


如 果 想 要 得 到 更 精确 的 颜色 替换 , 则 需要 在 颜色 替换 工具 属性 栏 中 设置 颜色 替换 时 采 
用 的 取样 模式 和 容 差 值 。 关 于 取样 模式 ,在 后 面 的 橡皮 擦 工具 中 会 进一步 描述 。 


2. 历史 画笔 工具 
Photoshop 提供 的 历史 画笔 工具 不 同 于 一 般 绘图 工具 ,需要 借助 历史 记录 面板 完成 图 
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像 恢 复 操作 。 历 史 画 笔 工 具 包 括 : 历史 记录 画笔 工具 渗 和 历史 记录 艺术 画笔 工具 Z. 

将 鼠标 移 到 工具 箱 中 历史 记录 画笔 工具 图 标 茹 MERRE ymer ~ 
键 按 住 1 秒 钟 ,显示 弹出 菜单 , 单 击 对 应 图 标 即 可 选中 该 工具 ,如 __ RRSRSETA Y) 
图 5. 26 所 示 。 图 5.26 历史 画笔 工具 

(1) 历史 记录 画笔 工具 

历史 记录 画笔 工具 主要 用 来 恢复 图 像 。 在 Photoshop 中 ,对 图 像 的 每 一 步 操作 都 记录 
到 历史 记录 面板 中 。 首 先 在 历史 记录 面板 中 某 一 操作 前 单 击 鼠 标 左 键 设置 还 原点 ,然后 在 
图 像 窗口 中 单 击 和 鼠标 并 移动 ,此 时 历史 记录 画笔 工具 就 会 将 图 像 恢 复 到 还 原点 设置 时 的 操 
作 状 态 下 。 使 用 历史 记录 画笔 工具 恢复 图 像 效 果 如 图 5. 27 所 示 。 


入 历史 记录 x ya 
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图 5.27 使 用 历史 记录 画笔 工具 恢复 图 像 


(2) 历史 记录 艺术 画笔 工具 

历史 记录 艺术 画笔 工具 使 用 方法 与 历史 记录 画笔 工具 类 似 ,不 同 之 处 在 于 ,历史 记录 艺 
术 面 笔 工具 在 恢复 图 像 的 同时 ,对 图 像 添加 了 艺术 效果 。 历 史记 录 艺 术 画 笔 工 具 提 供 了 十 
种 样式 ,在 属性 栏 中 的 “样式 ”下 拉 列 表 框 中 选择 所 需要 的 样式 。 使 用 历史 记录 艺术 画笔 工 
具 处 理 图 像 效 果 如 图 5. 28 所 示 。 


样式 : 
(a) 样式 设置 O MRE” FERIR O “PARSE” ERAR 
图 5.28 使 用 历史 记录 艺术 画笔 工具 处 理 图 像 
3. 文字 工具 


Photoshop 提供 的 文字 工具 是 一 组 工具 ,包括 横 排 文 字 工 具 T ` 直 排 文字 工具 IT H 
排 文字 蒙 版 工具 P 和 直 排 文字 蒙 版 工具 大 。 

将 鼠标 移 到 工具 箱 中 横 排 文字 工具 图 标 T , 单 击 鼠 标 左 键 按 住 1 秒 钟 ,显示 弹出 菜单 ， 
单 击 对 应 图 标 即 可 选中 该 工具 ,如 图 5. 29 所 示 。 
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Q) 横 排 文字 工具 和 直 排 文字 工具 

横 排 文字 工具 和 直 排 文字 工具 主要 用 来 为 图 像 添加 横向 排列 和 纵向 排列 的 文字 ， 
Photoshop 使 用 文字 图 层 存储 文字 信息 。 

在 使 用 该 工具 时 需要 在 属性 栏 中 设 定 文字 的 字体 ,大 小 .颜色 以 及 排列 方式 等 。 接 下 来 
在 图 像 窗口 中 单 击 鼠 标 左 键 ,出现 闪 动 光标 提示 文字 输入 ,如 图 5. 30 所 示 。 


FIE UIE 司 | mpos Bae A| E = | 


[ 沪 直 排 文 字 莹 版 工具 T 


图 5.29 文字 工具 图 5.30 使 用 横 排 文字 工具 输入 文字 


。 更 改 文字 属性 设置 

如 果 想 要 对 已 经 输入 的 文字 更 改 颜色 ,大 小 等 参数 设置 , 则 需要 选择 对 应 文字 工具 , 然 
后 在 图 层面 板 选中 该 文字 所 在 图 层 , 此 时 鼠标 变 成 工 形状 ,然后 单 击 并 拖 动 鼠标 ,将 文字 选 
中 ,在 属性 栏 中 更 改 对 应 参数 设置 即 可 ,如 图 5. 31 所 示 。 单 击 工 具 箱 中 其 他 工具 图 标 , 即 可 
退出 文字 编辑 状态 。 


“未 标题 -1 @ 100% (ETS, DEOR 


: [200% 国 
BE: Ob @ 十 :100% M] 
=T Bees 


je | z a 


(a) 选择 文字 图 层 (b) 选择 文字 


。 文 字 变形 
如 果 想 要 对 文字 实现 更 复杂 的 变形 操作 ,例如 旋转 ,缩放 等 , 则 需要 使 用 自由 变换 功能 


有 具体 操作 过 程 如 下 : 
O 首先 选中 文字 所 在 图 层 ,然后 单 击 菜单 “编辑 ”>“ 自 由 变换 ”, 文 字 四 周 会 出 现 带 错 
点 的 矩形 控制 框 。 


© 旋转 操作 : 将 鼠标 移 到 矩形 控制 框 的 任意 一 个 角 上 ,鼠标 变 成 形状 , 单 击 鼠 标 左 
键 按 逆 时 针 或 者 顺 时 针 移 动 鼠 标 , 即 可 实现 文字 的 旋转 操作 。 

© 缩放 操作 : 将 鼠标 移 到 矩形 控制 框 的 任意 一 个 角 上 或 者 任意 一 条 边 上 的 中 间 锚 点 ， 
鼠标 变 成 +* 形状 , 单 击 鼠 标 左 键 并 向 外 或 向 内 拖 动 鼠标 , 即 可 实现 文字 的 缩放 操作 。 

© 当 使 用 自由 变换 完成 文字 的 变形 操作 后 ,可 以 单 击 工具 箱 中 任意 工具 图 标 ,就 可 以 
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退出 自由 变换 的 编辑 状态 。 此 时 ,Photoshop 会 弹出 对 话 框 ,确认 是 否 应 用 变换 , 单 击 “ 确 
定 ?按钮 即 可 ,如 图 5. 32 所 示 。 


Adobe Photoshop CS3 Extended 


横 排 文 字 | 


eh of 


(a) 文字 旋转 (b) 文字 缩放 (c) 应 用 变换 
图 5.32 使 用 自由 变换 进行 文字 变形 


(2) 横 排 文字 蒙 版 工具 和 直 排 文字 蒙 版 工具 

与 横 排 文字 和 直 排 文字 工具 完全 不 同 , 横 排 文 字 蒙 版 工具 和 直 排 文字 蒙 版 工具 主要 用 
来 创建 横向 排列 和 纵向 排列 的 文字 形状 的 选区 ,使 用 该 工具 和 颜色 填充 工具 可 以 创建 更 加 
丰富 多 彩 的 文字 效果 。 横 排 文字 蒙 版 工具 具体 操作 过 程 如 下 : 

O 首先 从 工具 箱 中 选择 横 排 文字 蒙 版 工具 置 。 

© 在 图 像 窗 口中 合适 位 置 单 击 鼠 标 左 键 , 出 现 闪 动 光标 ,在 属性 栏 设置 好 横 排 文字 蒙 
板 工具 的 字体 ,大 小 以 及 排列 方式 等 参数 ,然后 在 闪 动 光标 处 输入 文字 。 此 时 ,图 像 窗口 除 
文字 外 背景 颜色 变 成 了 淡 红 色 。 

@ 在 工具 箱 中 单 击 任意 图 标 , 退 出 文字 蒙 版 编辑 状态 。 输 入 的 文字 边界 出 现 闪 动 的 虚 
线 框 ,此 时 文字 选区 创建 成 功 。 

文字 选区 一 旦 创建 成 功 , 接 下 来 就 可 以 使 用 颜色 填充 工具 为 该 选区 填充 颜色 ,图案 或 渐 
变色 。 使 用 横 排 文字 蒙 版 工具 创建 文字 选区 如 图 5. 33 所 示 。 


Oe) AHM- @ 10O RCNA) S] 


横 排 文 RTCA 


(b) 创建 文字 选区 (0) 使 用 渐变 色 填 充 文字 选区 
图 5.33 使 用 横 排 文字 蒙 版 工具 创建 文字 选区 


4. 填充 工具 


Photoshop 提供 的 填充 工具 可 以 使 用 指定 的 颜色 或 图 案 对 选区 内 进行 填充 , 它 包 括 一 
组 工具 : 渐变 工具 MARATHA . 

将 鼠标 移 到 工具 箱 中 渐变 工具 图 标 到 . 单 击 鼠 标 左 键 按 住 1 秒 钟 ,显示 弹出 菜单 , 单 
击 对 应 图 标 即 可 选中 该 工具 ,如 图 5. 34 所 示 。 

(1) 渐变 工具 

渐变 工具 可 以 用 来 对 指定 区 域内 进行 两 种 以 上 颜色 的 渐变 填充 。 具 体操 作 过 程 如 下 : 

O 使 用 选区 工具 在 图 像 区 域 中 创建 选区 。 
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© 在 工具 箱 中 选择 渐变 工具 国 ,鼠标 变 成 + ”字形 状 。 

@ 设置 要 填充 的 渐变 图 案 。 

Photoshop 预 设 了 多 种 渐变 图 案 效果 ,可 以 在 渐变 工具 的 属性 栏 中 单 击 栈 E 图 标 
的 下 拉 箭 头 ,在 弹出 面板 中 单 击 需 要 填充 的 渐变 图 案 ,如 图 5. 35 所 示 。 


annan 


» 
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JA 
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图 5.34 填充 工具 图 5.35 选择 渐变 图 案 
O 设置 渐变 填充 模式 。 
渐变 工具 提供 了 五 种 渐变 填充 模式 : 线性 渐变 国 . 径 向 渐变 图 .角度 渐变 轿 .对 称 渐 
变 回 以 及 菱形 渐变 加 ,在 属性 栏 中 单 击 对 应 图 标 即 可 设置 渐变 填充 模式 。 当 设置 不 同 的 
渐变 填充 模式 时 ,其 渐变 填充 方法 和 填充 效果 也 不 同 , 如 图 5. 36 所 示 。 


未 标题 -1 @ 100% (LAE, RGB/B) 加 回国 


图 5.36 五 种 渐变 模式 


线性 渐变 : 线性 渐变 是 沿 着 直线 方向 从 左 ( 右 ) 到 右 ( 左 ) 或 从 上 (下 ) 到 下 (上 ) 进 行 , 渐 
变 的 起 点 位 于 选区 边缘 。 
径 向 渐变 : 径 向 渐变 是 从 中 心 向 四 周 进行 ,渐变 的 起 点 位 于 选区 中 心 。 
角度 渐变 : 角度 渐变 是 沿 着 360° 角 的 方向 旋转 进行 ,渐变 的 起 点 到 终点 之 间 的 连 线 作 
为 渐变 开始 的 0° 角 方向 。 
对 称 渐 变 : 对 称 渐变 是 从 中 心 开 始 上 下 或 左右 对 称 渐变 ,渐变 的 起 点 位 于 选区 中 间 。 
萎 形 渐变 : 萎 形 渐变 是 从 中 心 向 四 周 呈 菱形 进行 ,渐变 的 起 点 位 于 选区 中 心 。 
@ 在 设 定 的 选区 中 进行 渐变 填充 。 
进行 渐变 填充 时 , 单 击 鼠标 左 键 , 此 时 为 渐变 填充 的 起 点 位 置 ,然后 拖 动 鼠标 直到 松 开 
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鼠标 左 键 ,此 时 为 渐变 填充 的 终点 位 置 。 在 图 像 窗口 中 显示 为 从 起 点 到 终点 之 间 连 接 的 一 
条 直线 。 一 般 情 况 下 ,颜色 渐变 则 是 从 起 点 位 置 到 终点 位 置 进行 ,如 图 5. 37 所 示 。 


n 未 标题 -1 @ 100% (RGB/8) 


图 5.37 渐变 工具 填充 渐变 效果 


除了 使 用 预 设 的 渐变 图 案 ,Photoshop 还 允许 设计 人 员 自 己 自 定义 新 的 渐变 图 案 。 在 
属性 栏 中 单 击 ORE] 图 标的 中 间 位 置 ,显示 “渐变 编辑 器 ”对话 框 ,在 “ 预 设 " 选 项 组 中 选 
择 一 个 与 自 定义 的 渐变 图 案 类 似 的 图 案 单 击 , 并 对 其 命名 ,然后 单 击 "新 建 ”按钮 。“ 渐 变 编 
辑 器 ”对 话 框 下 方 会 显示 该 渐变 图 案 的 颜色 条 ,同时 Photoshop 会 自动 在 “ 预 设 ” 选 项 组 的 末 
尾 添加 该 渐变 图 案 的 副本 。 

单 击 颜 色 条 的 上 方 色 标 可 以 更 改 当 前 渐变 颜色 的 透明 度 效果 , 单 击 下 方 色 标 可 以 更 改 
当前 渐变 的 颜色 ,如 果 在 空白 色 单 击 鼠 标 ,还 会 添加 新 的 色 标 ,用 来 设置 新 增加 的 渐变 色 的 
颜色 和 透明 度 ,然后 单 击 * 确 定 ? 按 钮 ,就 可 以 使 用 自 定义 的 渐变 图 案 填充 图 像 。 有 时 候 为 了 
达到 腊 胱 的 效果 ,需要 在 属性 栏 中 设置 渐变 工具 的 “不 透明 度 " 参 数 。 自 定义 渐变 图 案 如 
图 5. 38 所 示 。 


(a) 渐变 编辑 器 (b) 使 用 自 定义 渐变 图 案 填充 效果 
图 5.38 自 定义 渐变 图 案 
(2) 油漆 桶 工具 


油漆 桶 工具 可 以 用 来 在 图 像 中 填充 颜色 或 图 案 。 在 进行 填充 时 ,油漆 桶 工具 会 根据 设 
定 的 容 差 值 ,只 对 与 鼠标 单 击 处 的 颜色 近似 的 区 域 进行 填充 ,填充 的 效果 是 成 “ 片 ” 状 区 域 。 
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油漆 桶 有 两 种 填充 方式 : 前 景 填充 和 图 案 填 充 。 使 用 前 者 填充 时 ,需要 预先 设置 好 要 
填充 的 前 景色 ,然后 单 击 鼠 标 左 键 进行 填充 。 使 用 后 者 填充 时 ,需要 选择 要 填充 的 图 案 。 在 
属性 栏 中 设置 好 填充 方式 以 及 填充 的 “不 透明 度 ”" 和 “ 容 差 ”在 图 像 窗 口中 单 击 鼠 标 , 即 完成 
填充 。 图 5. 39 给 出 了 油漆 桶 属性 栏 设置 ,图 5. 40 给 出 了 使 用 “前 景 ? 和 “图 案 ” 填 充 图 像 
效果 。 

油漆 桶 也 支持 自 定义 图 案 填 充 , 首 先 使 用 矩形 选区 工具 创建 矩形 选区 ,然后 单 击 菜单 
“编辑 ”一 “定义 图 案 ”, 选 定 的 图 案 自动 存储 到 油漆 桶 的 图 案 中 。 


a~ 


“ma M 


回 消除 锯齿 回 连 续 的 


(a) 使 用 “前 景 ”填充 (b) 使 用 “图 案 ” 填 充 


图 5.40 使 用 “前 景 "? 和 “图 案 ” 填 充 图 像 


5. 图 章 工具 


图 章 工 具 主 要 用 于 图 像 的 简单 复制 , 它 是 一 组 工具 包括 : 仿制 图 章 工具 $ 和 图 案 图 章 
TA®. 

+ L OMELIA $ 将 鼠标 移 到 工具 箱 中 仿制 图 章 工具 图 标 晶 , 单 击 鼠 标 左 键 按 住 1 
AR BRBETA S| 秒 钟 ,显示 弹出 菜单 , 单 击 对 应 图 标 即 可 选中 该 工具 ,如 图 5. 41 所 示 。 
图 5.41 图 章 工具 (1) 仿制 图 章 工具 

使 用 仿制 图 章 工具 复制 图 像 时 ,需要 首先 在 要 复制 图 像 的 位 置 设置 
取样 点 ,同时 单 击 鼠标 左 键 和 Alt 键 ,此 时 鼠标 变 成 © 形状 。 然 后 松 开 Alt 键 ,将 鼠标 移 到 
需要 复制 图 像 的 目标 区 域 , 单 击 鼠 标 左 键 并 移动 ,仿制 图 章 工具 会 将 “十 "光标 位 置 的 图 像 复 
制 到 鼠标 移动 的 目标 位 置 。 使 用 仿制 图 章 工具 复制 图 像 如 图 5. 42 所 示 。 
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D 图 案 图 章 工具 

图 案 图 章 工具 以 预先 设 定好 的 图 案 为 复制 对 象 进行 复制 ,具体 操作 过 程 如 下 : 

O 将 要 复制 图 案 的 目标 区 域 设 定 为 选区 。 

© 在 工具 箱 中 选择 图 案 图 章 工 具 4$ ,在 属性 栏 中 选择 要 复制 的 图 案 ,然后 单 击 鼠 标 左 
键 并 移动 ,此 时 ,会 将 选择 的 图 案 复 制 到 鼠标 移动 位 置 。 使 用 图 案 图 章 工 具 复制 图 像 如 
图 5. 43 所 示 。 

Photoshop 支持 自 定义 图 案 , 方 法 与 自 定义 填充 图 案 一 致 。 


性 IEAG0567- jpg @ 25% (RGB/8) DR 


图 5.42 使 用 仿制 图 章 工具 复制 图 像 
6. BRIA 
Photoshop 提供 的 擦 除 工 具有 三 个 : 橡皮 擦 工具 A ,背景 橡皮 擦 工具 Z 和 魔术 橡皮 
BAe. 


将 鼠标 移 到 工具 箱 中 橡皮 擦 工具 图 标 A Pads BOR ER EBB Os tH KA, 
单 击 对 应 图 标 即 可 选中 该 工具 ,如 图 5. 44 所 示 。 


= J BEBIA 
yARORBIA E 
27 RRORBIA E 


不 透明 度 : | 100% P RE: |100% A 


图 5.43 使 用 图 案 图 章 工 具 复制 图 像 图 5.44 擦 除 工具 


(1) 橡皮 擦 工具 
橡皮 擦 工具 可 用 来 擦 除 普 通 图 层 .背景 图 层 以 及 选区 内 的 图 像 。 如 果 擦 除 的 图 层 是 背 


景 图 层 ,会 使 用 背景 色 颜色 替代 擦 除 后 的 图 像 区 域 。 如 果 控 除 的 不 是 背景 图 层 , 擦 除 后 的 图 
像 区 域 使 用 透明 色 蔡 代 。 使 用 橡皮 擦 工具 控 除 图 像 如 图 5. 45 所 示 。 
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SA 


(a) 擦 除 普通 图 层 (b) 擦 除 背 景 图 层 
图 5.45 使 用 橡皮 擦 工 具 擦 除 图 像 


在 擦 除 时 ,只 需要 单 击 鼠 标 左 键 并 移动 鼠标 即 可 。 在 橡皮 擦 工具 的 属性 栏 中 可 以 设置 
擦 除 的 笔 刷 大 小 ,不 透明 度 、 流 量 以 及 抹 到 历史 记录 参数 。 如 果 选 中 “ 抹 到 历史 记录 ” 复 选 
框 ,需要 在 历史 记录 面板 中 单 击 鼠 标 设置 还 原点 ,此 时 ,橡皮 擦 工具 就 变 成 图 像 恢 复工 具 ,将 
图 像 恢复 到 设 为 还 原点 时 操作 的 效果 。 橡 皮 控 工 具 的 属性 栏 如 图 5. 46 所 示 。 


很 Ge: © -| 模式 : | 画笔 V| 不 过 明度 :100% H] aa: [107] A 回 抹 到 历史 记录 


图 5.46 橡皮 擦 工具 的 属性 栏 


(2) 背景 橡皮 擦 工具 

背景 橡皮 控 工 具 将 与 取样 点 附近 颜色 容 差 相 近 的 区 域 进行 探 除 ,常用 于 图 像 抠 取 。 背 
景 橡皮 擦 工具 会 将 鼠标 单 击 时 的 位 置 设 为 取样 点 ,鼠标 为 “十 " 字 光 标 形状 ,“ 十 ” 字 光 标 中 心 
的 区 域 即 为 氛 除 区 域 。 取 样 模式 有 三 种 ,分 别 是 连续 至 一 次 思 MIG eM 。 在 属性 
栏 中 单 击 对 应 图 标 , 即 可 设置 取样 模式 。 取 样 模式 设置 不 同 , 擦 除 效 果 也 不 同 。 使 用 背景 橡 
皮 擦 工具 的 3 种 取样 模式 擦 除 图 像 效 果 如 图 5.47 所 示 。 


Sos 


(a) “连续 ”取样 模式 (b)“ 一 次 ”取样 模式 


EE 


(“背景 色 板 ”取样 模式 


图 5.47 使 用 背景 橡皮 擦 工具 的 3 种 取样 模式 擦 除 图 像 


第 5 章 ”Photoshop 基 础 


连续 : 单 击 鼠 标 并 移动 ,此 时 “十 ”" 字 光标 形状 的 取样 点 会 随 着 鼠标 的 移动 而 改变 , 擦 除 
效果 比较 连续 。 

一 次 : 单 击 鼠标 并 移动 ,此 时 会 将 首次 单 击 鼠标 时 的 位 置 设 为 取样 点 ,只 要 鼠标 不 松 
开 , 取 样 点 就 不 变化 ,取样 点 位 置 容 差 相近 的 颜色 就 比较 容易 擦 除 。 即 使 “十 " 字 光 标 中 心 移 
到 其 他 位 置 也 不 会 被 擦 除 。 

背景 色 板 : 背景 橡皮 擦 工具 只 对 与 工具 箱 中 设 定 的 背景 色相 近 的 颜色 进行 擦 除 。 

使 用 背景 橡皮 擦 工具 进行 抠 图 时 ,在 抠 取 的 图 像 边 缘 使 用 “一 次 ”取样 模式 , 设 定数 值 低 
的 容 差 值 ,必要 时 需要 在 背景 橡皮 擦 工具 的 属性 栏 中 选中 “保护 前 景色 ” 复 选 框 ,只 要 设置 为 
前 景色 的 颜色 都 不 会 被 擦 除 掉 ( 在 工具 箱 中 单 击 吸管 工具 SY ,在 需要 保护 的 图 像 边 缘 单 击 
鼠标 , 单 击 处 的 颜色 自动 设 为 前 景色 )。 只 要 抠 取 的 图 像 边缘 处 理 好 了 ,远离 边缘 的 区 域 可 
以 使 用 “连续 ”取样 模式 或 者 其 他 工具 进行 擦 除 即 可 。 使 用 背景 橡皮 擦 工具 抠 图 效果 如 
图 5. 48 所 示 。 


容 差 : [10% >] 回 保护 前 景色 
图 5.48 ”使 用 背景 橡皮 擦 抠 图 效果 
G) 魔术 橡皮 擦 工具 
使 用 魔术 橡皮 擦 工具 进行 图 像 擦 除 时 ,首先 在 属性 栏 中 设置 “ 容 差 ”, 然 后 在 擦 除 的 图 像 
区 域 单 击 鼠 标 , 与 鼠标 单 击 时 的 取样 点 颜色 相近 的 图 像 即 被 擦 除 , 擦 除 的 区 域 成 “ 片 ” 状 区 
域 。 使 用 魔术 橡皮 擦 工具 擦 除 图 像 效 果 如 图 5. 49 所 示 。 


“A505658. ipg @ 25% (MÆ 0. R65/s) EAR 


4 ~ 


sa: [0 | ain | Wee 


图 5.49 使 用 魔术 橡皮 擦 工具 擦 除 图 像 
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7. 图 像 修 复工 具 


Photoshop 提供 的 图 像 修 复工 具 主要 用 来 修复 图 像 , 它 包括 污点 修复 画笔 工具 潍 16 
RMETA SY. TP 修补 工具 以 及 谭 红 眼 工具 。 
将 鼠标 移 到 工具 箱 中 污点 修复 画笔 工具 图 标 况 , 单 击 鼠 标  , grsesexra o 


左 键 按 住 1 秒 钟 ,显示 弹出 菜单 , 单 击 对 应 图 标 即 可 选中 该 工具 ， 多 TR ， 
如 图 5. 50 所 示 。 


-名 红眼 工具 jj 

O 污点 修复 画笔 工具 和 修复 画笔 工具 eo ARESTA 

污点 修复 画笔 工具 和 修复 画笔 工具 都 可 用 来 修复 图 像 或 照 
片 ,修复 时 会 将 取样 点 附近 的 图 像 复 制 到 有 污点 的 区 域 ,同时 取 
样 点 处 的 纹理 .光照 和 阴影 也 会 与 当前 区 域 的 像素 进行 匹配 ,使 得 修复 前 后 图 像 的 纹理 、 亮 
度 基 本 不 发 生变 化 。 

二 者 主要 区 别 在 于 : 

使 用 污点 修复 画笔 工具 不 需要 手动 取样 ,该 工具 会 自动 将 鼠标 单 击 处 的 邻近 像素 作为 
取样 点 ,操作 时 只 需要 将 鼠标 移 到 污点 区 域 , 单 击 鼠 标 左 键 ,移动 鼠标 即 可 ,操作 简单 方便。 

使 用 修复 画笔 工具 需要 手动 设置 取样 点 ( 单 击 鼠 标 左 键 的 同时 按 住 Alt 键 ) ,然后 单 击 
鼠标 左 键 并 移动 ,该 工具 会 将 "十" 字 光 标 区 域 的 图 像 复 制 到 鼠标 移动 区 域 ,进行 图 像 修复 。 

使 用 污点 修复 画笔 工具 和 修复 画笔 工具 修复 图 像 如 图 5. 51 所 示 。 


(b) 使 用 修复 画笔 工具 设置 取样 点 


图 5.51 使 用 污点 修复 画笔 工具 和 修复 画笔 工具 修复 图 像 


(2) 修补 工具 和 红眼 工具 


修补 工具 主要 用 来 修复 较 大 面积 的 污点 。 在 使 用 修补 工具 时 ,需要 单 击 鼠 标 左 键 并 拖 


动 , 创 建 源 图 像 区 域 选 区 ,然后 移动 鼠标 到 选区 内 , 单 击 鼠 标 左 键 并 移动 鼠标 到 需要 修复 的 
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目标 区 域 。 
修补 工具 有 两 种 修补 方式 : 源 和 目标 。 需 要 在 修复 图 像 前 进行 设置 ,可 以 通过 单 击 属 
性 栏 中 “ 源 ”" 和 “目标 ”选项 完成 ,使 用 修补 工具 修复 图 像 效 果 如 图 5. 52 所 示 。 


(a) 设 定 源 图 像 区 域 选 区 (b) 采用 “ 源 ” 修 补 方式 (c) 采用 “目标 ”修补 方式 
图 5.52 使 用 修补 工具 修复 图 像 


源 : 指 的 是 从 目标 修补 源 ,是 将 目标 区 域 的 图 像 奉 换 到 源 区 域 。 

目标 : 指 的 是 从 源 修补 目标 ,是 将 源 区 域 的 图 像 蔡 换 到 目标 区 域 。 

不 管 采用 何 种 修补 方式 ,都 不 是 简单 的 图 像 蔡 换 或 复制 ,而 是 将 替换 的 图 像 与 当前 修复 
的 区 域 进行 纹理 ,光照 和 阴影 进行 匹配 ,从 而 使 修复 后 的 图 像 很 好 地 融入 图 像 其 余部 分 。 

红眼 工具 主要 用 来 对 照片 中 的 红眼 进行 修复 。 为 了 避免 红眼 ,现在 很 多 数码 相机 都 有 
红眼 去 除 功能 来 消除 红眼 。 使 用 红眼 工具 需要 在 属性 栏 中 设置 瞳孔 大 小 和"* 变 暗 量 ”属性 
参数 。 其 中 ,瞳孔 大 小 用 来 设置 红眼 工具 影响 的 区 域 , 变 暗 量 则 用 来 校正 暗 度 。 


8. 图 像 修饰 工具 


使 用 Photoshop 提供 的 图 像 修 饰 工具 可 方便 地 对 图 像 进行 清晰 .模糊 以 及 色调 .饱和 度 
等 细节 处 理 , 共 包括 两 组 工具 : 模糊 工具 、 锐 化 工具 A RRT S 和 减 淡 工具 副 .加 深 
THE ,海绵 工具 国 。 

(1) 模糊 工具 、 锐 化 工具 和 涂抹 工具 . G AMIA r 

模糊 工具 、 锐 化 工具 和 涂抹 工具 主要 用 来 对 图 像 进 行 模糊 或 A STA 5 
清晰 处 理 。 将 鼠标 移 到 工具 箱 中 模糊 工具 图 标 @. , 单 击 鼠 标 左 
键 按 住 1 秒 钟 ,显示 弹出 菜单 , 单 击 对 应 图 标 即 可 选中 该 工具 ,如 图 5.53 模糊 工具 、 锐 化 工 
图 5.53 所 示 。 FMR RTH 

模糊 工具 主要 用 来 将 图 像 变 得 柔和 ,起 到 局 部 模糊 的 效果 。 在 属性 栏 中 可 以 对 该 工具 
的 “画笔 ”和 “强度 ”参数 进行 设置 。 

画笔 : 用 来 设置 模糊 的 大 小 。 

强度 ; 用 来 设置 画笔 的 力度 。 数 值 越 大 ,模糊 的 效果 越 强 。 

锐 化 工具 与 模糊 工具 相反 ,是 将 模糊 的 图 像 变 得 相对 清晰 ,无 论 是 模糊 还 是 锐 化 工具 ， 
都 会 丢失 图 像 信息 ,如果 处 理 过 度 ,将 会 导致 图 像 失 真 。 涂 抹 工 具 可 用 来 制作 手指 芒 取 湿 颜 
料 涂 抹 的 效果 。 使 用 模糊 工具 、 锐 化 工具 和 涂抹 工具 处 理 图 像 效果 如 图 5. 54 所 示 。 

(2) 减 淡 工 具 、 加 深 工 具 和 海绵 工具 

减 淡 工 具 、 加 深 工 具 和 海绵 工具 主要 用 来 对 图 像 的 色调 和 饱和 度 等 细节 进行 处 理 。 将 
鼠标 移 到 工具 箱 中 减 淡 工具 图 标 A , 单 击 鼠 标 左 键 按 住 1 秒 钟 ,显示 弹出 菜单 , 单 击 对 应 
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V 


(a) 模糊 工具 处 理 效果 (b) 锐 化 工具 处 理 效果 
图 5.54 使 用 模糊 工具 、 锐 化 工具 和 涂抹 工具 处 理 图 像 
图 标 即 可 选中 该 工具 ,如 图 5. 55 所 示 。 


减 淡 工 具 可 以 对 图 像 进行 局 部 减 淡 , 通 过 提高 图 像 的 亮度 改善 曝光 效果 ,属性 栏 中 “ 范 
围 "参数 用 于 选择 要 处 理 的 特殊 色调 区 域 ,包括 “阴影 “中 间 调 ”和 “高 光 ” 三 个 选项 。 


— 明 影 : 对 图 像 中 较 暗 的 区 域 进行 处 理 。 
ral 中 间 调 。 对 图 像 整体 进行 处 理 。 
高 光 : 对 图 像 中 高 光 区 域 进行 处 理 。 
图 5.55 减 痰 工具 .加深 工 。 。 加深 工具 可 以 对 图 像 进行 局 部 加 深 , 使 用 该 工具 可 以 加 深 


具 和 海绵 工具 。 ”图 像 中 的 阴影 或 对 高 光 区 域 进行 暗 化 处 理 。 
海绵 工具 主要 用 来 改变 图 像 的 饱和 度 , 分 为 加 色 和 去 色 两 种 工作 模式 。 加 色 一 般 用 来 
增强 图 像 色彩 饱和 度 , 使 图 像 颜色 更 加 鲜艳 ; 而 去 色 则 是 降低 图 像 色彩 饱和 度 ,使 图 像 更 加 
阴沉 昏暗。 使 用 减 淡 工 具 、 加 深 工 具 和 海绵 工具 处 理 图 像 如 图 5. 56 所 示 。 


(c) 使 用 海绵 工具 “去 色 ” 模 式 
图 5. 56 使 用 减 淡 工 具 、 加 深 工具 和 海绵 工具 处 理 图 像 
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(6.3 图 像 基本 操作 
A 


Photoshop 的 图 像 基本 操作 主要 包括 图 像 打开 和 保存 、 图 像 类 型 查看 、 图 像 移动 和 复制 
以 及 图 像 变 换 和 图 像 尺 寸 调 整 等 ,这 些 操作 需要 通过 菜单 实现 ,下 面 分 别 进行 介绍 。 


5.3.1 图 像 打 开 和 保存 


使 用 Photoshop 对 图 像 进 行 处 理 , 首 要 的 就 是 要 打开 需要 处 理 的 图 像 文件 。 选 择 菜单 
“文件 ”打开 ”, 在 弹出 的 “打开 ?对 话 框 中 选择 要 打开 的 图 像 文件 , 单 击 “打开 ?按钮 ， 
Photoshop 会 打开 一 个 新 窗口 显示 该 图 像 文件 。 

图 像 在 Photoshop 中 处 理 完成 ,可 以 保存 成 Photoshop 专用 的 Psd 格式 ,该 格式 存储 了 
图 像 在 进行 处 理 时 用 到 的 图 层 . 蒙 版 以 及 色彩 等 更 多 细节 信息 ,方便 对 该 图 像 进行 重新 编辑 
修改 。 

也 可 以 将 图 像 保存 成 其 他 图 片 格式 ,选择 菜单 “文件 ”>“ 存 储 为 ”, 输 入 文件 名 ,在 “文件 
类 型 "下 拉 菜 单 中 选择 需要 保存 的 图 像 类 型 。 如 果 输 入 的 文件 名 后 级 和 要 保存 的 图 像 类 型 
不 一 致 , 则 会 导致 该 图 像 无 法 正确 打开 。 如 果 选 择 菜 单 “ 文 件 ”>“ 存 储 ”, 则 会 默认 使 用 当前 
图 像 文 件 类 型 进行 保存 。“ 打 开 ” 对 话 框 和 “存储 为 ”对话 框 如 图 5. 57 所 示 。 


Surasn 
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me: 


回合 用 小 和 扩展 各 
人 A SORT, Rewer. 


图 5.57 “打开 ”对 话 框 和 “存储 为 ”对话 框 


5.3.2 图 像 类 型 查看 


选择 菜单 “图像 ”模式 ,在 弹出 的 菜单 中 显示 W 图 标的 选项 即 是 当前 图 像 的 类 型 信 
息 , 如 图 5. 58 所 示 。 如 果 要 更 改 当 前 图 像 类 型 ,只 需要 在 图 像 类 型 处 单 击 鼠 标 左 键 。 

Photoshop 支持 的 颜色 模式 包括 灰 度 .索引 颜色 .RGB 颜色 .CMYK 颜色 .Lab 颜色 以 
及 多 通道 模式 。 
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图 5.58 查看 图 像 类 型 


。 KERR 

该 模式 可 表示 纯 白 、 纯 黑 以 及 白 到 黑 之 间 的 过 渡 色 , 可 使 用 多 达 256 级 灰 度 来 表现 图 
像 。 灰 度 图 像 的 每 个 像素 有 一 个 0( 黑 色 ) 到 255( 白 色 ) 之 间 的 亮度 值 。 灰 度 值 也 可 以 用 黑 
色 油 墨 覆盖 的 百分比 来 度量 (0 等 于 白色 ,100% 等 于 黑色 )。 

。 索引 颜色 

也 称 为 映射 颜色 ,该 模式 采用 一 个 颜色 表 存 放 并 索引 图 像 中 的 颜色 ,可 最 多 生成 256 种 
颜色 的 8 位 图 像 文件 ,不 适合 进行 复杂 的 图 像 编 辑 和 操作 。 在 Photoshop 中 如 果 当 前 图 像 
类 型 是 索引 颜色 , 则 不 允许 进行 滤 镜 等 图 像 处 理 操作 。 

。 RGB 颜色 

该 模式 是 一 种 加 色 的 彩色 模型 ,是 计算 机 显示 彩色 图 像 的 最 佳 模式 。 在 RGB 彩色 模型 
中 ,任何 一 种 RGB 颜色 都 是 由 红 (R)、 绿 (G) 、 蓝 (B) 这 三 种 颜色 分 量 按照 不 同比 例 混合 而 
成 。 每 种 颜色 分 量 由 8 位 二 进 制 表示 , RGB 彩色 模型 共 可 以 表示 出 2X28X28 = 24 = 
16 777 216 种 颜色 ,简称 为 1600 万 色 或 24 位 色 。RGB 色彩 模式 的 值 是 0 一 255 之 间 的 整数 
值 。 例 如 当红 、 绿 、 蓝 都 是 255 时 ,构成 白色 ,当红 , 绿 、 蓝 都 是 0 时 ,构成 黑色 。 

。 CMYK 颜色 

该 模式 也 称 为 印刷 色彩 模式 ,是 一 种 复杂 的 彩色 模型 ,主要 应 用 在 印刷 行业 。 与 RGB 

彩色 模型 类 似 ,CMYK 颜色 模型 是 由 四 种 油墨 色 构 成 ,分 别 是 青 (C)、 品 红 (M) 、 黄 (Y) 以 及 
黑色 (K)。 每 种 油墨 色 由 8 位 二 进 制 表示 ,CMYK 彩色 模型 共 可 以 表示 出 2: X 28 X23 X 
28=2% =4 294 967 296 种 颜色 。CMYK 色彩 模式 的 值 是 由 添加 油墨 浓度 的 百分比 来 表示 ， 
例如 暗 红色 是 由 20% 青 、100% 品 红 、80% 黄 和 5% 黑 构成 。 当 四 种 基色 值 均 为 0 时 ,就 会 产 
生 纯 白色 。 

。 Lab 颜色 

该 模式 是 一 种 不 依赖 光线 及 颜料 的 颜色 模式 ,包括 亮度 L(0 一 100) ,绿色 到 紫红 色 的 色 
彩 a( 十 127 一 一 128) 、 蓝 色 到 黄色 的 色彩 b( 十 127 一 一 128) 三 种 通道 。Lab 描述 的 是 颜色 的 
显示 方式 ,而 不 是 设备 (如 显示 器 ) 生 成 颜色 所 需 的 特定 色 料 的 数量 ,所 以 Lab 被 视 为 与 设 
备 无 关 的 颜色 模型 。 有 时 候 Lab 颜色 模式 被 用 作 CMYK 模式 和 RGB 模式 转换 的 桥梁 。 

。 多 通道 

该 模式 图 像 在 每 个 通道 中 包含 256 个 灰 阶 ,对 于 特殊 打印 很 有 用 。 例 如 ,如 果 图 像 中 只 
使 用 一 两 种 或 两 三 种 颜色 ,使 用 多 通道 模式 可 以 减少 印刷 成 本 并 保证 图 像 颜色 正确 输出 。 
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5.3.3 图 像 剪 切 和 复制 


要 想 对 图 像 进行 剪 切 操作 ,首先 使 用 选区 工具 将 需要 剪 切 的 图 像 区 域 设 定 为 选区 , 接 下 
来 在 工具 箱 中 单 击 3 移动 工具 图 标 ,将 鼠标 移 到 选区 内 ,此 时 鼠标 变 成 和 形状 ,然后 单 击 
鼠标 左 键 移动 鼠标 , 即 可 将 选区 内 的 图 像 剪 切 。 如 果 在 单 击 鼠 标 移动 鼠标 的 同时 按 住 Alt 
键 ,此 时 鼠标 变 成 徐 形状 , 即 可 将 选区 内 的 图 像 进行 复制 ,如 图 5. 59 所 示 。 


图 5.59 图 像 剪 切 和 复制 


也 可 以 使 用 Ctrl 十 C 键 将 选区 内 的 图 像 复 制 到 剪贴 板 上 ,使 用 Ctrl 十 V 键 将 剪贴 板 上 
的 图 像 复制 到 指定 图 像 文件 中 ,Photoshop 会 自动 创建 新 图 层 存 储 复制 的 图 像 。 
5.3.4 图 像 形状 变换 


图 像 形状 变换 包括 缩放 、 旋 转 、 斜 切 、 扭 曲 、 透 视 和 变形 。 进 行 变换 前 ,首先 使 用 选区 工 
具 将 需要 进行 形状 变换 的 图 像 区 域 创建 为 选区 ,然后 选择 菜单 “编辑 ”一 “变换 ”, 在 弹出 的 菜 
单 中 选择 要 应 用 的 变换 选项 ,此 时 选区 四 周 出 现 带 有 锚 点 的 和 矩形 控制 框 ,如 图 5. 60 所 示 。 


~ INAG2246. jpg @ 25% (RGB/8) 


图 5.60 带 有 锚 点 的 矩形 控制 框 


1. 缩放 
将 鼠标 移 到 矩形 控制 框 上 的 锚 点 ,鼠标 变 成 +* 形状 , 单 击 鼠 标 左 键 向 里 或 向 外 任意 拖 
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息 , 对 选区 内 的 图 像 放大 和 缩小 。 
2. 旋转 


将 鼠标 移 到 和 矩形 控制 框 任意 角 上 ,鼠标 变 成 入 形状 , 单 击 鼠标 左 键 按 顺 时 针 或 道 时 针 
方向 移动 鼠标 ,对 选区 内 的 图 像 进 行 旋转 。 


3. 斜 切 


对 矩形 区 域 进行 斜 切 变 换 就 是 对 其 进行 平行 四 边 形变 换 。 将 鼠标 移 到 矩形 控制 框 的 水 
平 或 垂直 边框 ,鼠标 变 成 所 或 Ms 形状 , 单 击 鼠 标 左 键 左右 或 上 下 移动 鼠标 ,对 选区 内 的 图 
像 斜 切 变换 。 


4. 扭曲 


将 鼠标 移 到 矩形 控制 框 任意 角 上 ,鼠标 变 成 办 形状 , 单 击 鼠 标 左 键 任意 拖 动 角 上 的 锚 
点 ,对 选区 内 的 图 像 进 行 扭曲 变换 。 


5. 透视 

对 矩形 区 域 进行 透视 变换 就 是 对 其 进行 梯形 变换 。 将 鼠标 移 到 矩形 控制 框 任意 角 上 ， 
鼠标 变 成 队 形状 , 单 击 鼠 标 左 键 向 里 或 向 外 拖 搜 鼠标 ,对 选区 内 的 图 像 透 视 变 换 。 

6. 变形 

将 鼠标 移 到 矩形 控制 框 以 内 任意 位 置 ,鼠标 变 成 形状 , 单 击 鼠 标 左 键 并 拖 动 ,对 选区 
内 图 像 进行 任意 变形 。 

如 果 想 退出 形状 变换 的 编辑 状态 ,可 以 单 击 工 具 箱 中 任意 图 标 。 通常 使 用 斜 切 .扭曲 和 
透视 变换 可 以 制作 出 立方 体 效果 。 图 像 形状 变换 效果 如 图 5. 61 所 示 。 


EDS 


(a)“ 缩 放 ” 变 换 


(e)“ 透 视 ” 变 换 (人 “变形 ”变换 
图 5.61 图 像 形状 变换 


(d) “Hii” E 
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5.3.5 图 像 翻转 变换 


图 像 翻转 变换 包括 水 平 翻转 和 垂直 翻转 。 水 平 翻转 可 制作 出 图 像 左右 对 称 效果 ,垂直 
翻转 可 制作 出 水 面 镜像 效果 。 在 进行 翻转 变换 前 ,首先 使 用 选区 工具 将 需要 变换 的 图 像 创 
建 为 选区 ,然后 选择 菜单 “编辑 ”一 “变换 ”>“ 水 平 翻转 ”或 “编辑 ">" 变换” 一 “垂直 翻转 ”, 选 
区 内 的 图 像 自动 翻转 。 


5.3.6 图 像 色 相 、 饱 和 度 和 明度 调整 


色相 ,饱和 度 和 明度 构成 了 色彩 的 三 要 素 。 色 相 是 指 色 彩 的 相貌 ,如 红 、 黄 、 绿 、 蓝 等 各 
有 自己 的 色彩 相貌 ,是 区 别 各 种 不 同色 彩 的 主要 依据 。 饱 和 度 是 指 色 彩 的 纯度 ,其 值 越 高 ， 
表现 越 鲜明 ,其 值 越 低 , 表 现 越 暗淡 。 明 度 是 指 色彩 的 明暗 程度 ,白色 明度 最 高 ,黑色 明度 
最 低 。 

在 Photoshop 中 ,对 图 像 的 色彩 调整 实际 上 就 是 对 色彩 三 要 素 进 行 调 整 的 。 首 先 选择 
菜单 “图 像 " 一 “调整 ”色相 /饱和 度 ”, 在 弹出 的 “色相 /饱和 度 " 对 话 框 中 移动 色相 .饱和 度 
和 明度 的 滑 块 来 对 其 进行 更 改 。 在 “色相 /饱和 度 " 对 话 框 下 方 ,靠近 上 面 的 颜色 条 是 未 更 改 
数值 的 颜色 分 布 ,靠近 下 面 的 颜色 条 则 是 更 改 完 数值 之 后 的 颜色 分 布 ,通过 对 比 两 个 颜色 条 
的 变化 ,可 以 很 容易 看 出 更 改 前 后 颜色 的 变化 。 图 像 色相 调整 效果 如 图 5. 62 所 示 。 


(b) 调整 之 后 (c)“ 色 相 / 饱 和 度 ” 对 话 框 
图 5.62 调整 图 像 色 相 


单 击 “ 色 相 / 饱 和 度 ” 对 话 框 中 的 “编辑 ”参数 下 拉 菜 单 选项 ,可 以 用 来 设置 对 色相 、 饱 和 
度 和 明度 起 作用 的 色彩 范围 ,这 只 是 大 概 的 色彩 范围 。 如 果 只 对 图 像 中 指定 的 颜色 进行 色 
相 、 饱 和 度 和 明度 的 更 改 ,可 以 设置 对 话 框 下 方 的 吸管 工具 A .添加 到 取样 工具 内 和 从 取 
REP A TA A. 吸管 工具 六 可 以 用 来 将 图 像 中 指定 的 颜色 设置 为 编辑 的 色彩 范围 ,只 
对 该 范围 的 颜色 进行 更 改 ,图 像 中 的 其 他 颜色 不 受 影响 ; 添加 到 取样 工具 A 可 用 来 扩展 当 
前 编辑 的 色彩 范围 ; 从 取样 中 减 去 工具 A 可 用 来 减少 当前 编辑 的 色彩 范围 。 


5.3.7 图 像 亮 度 和 对 比 度 调整 


亮度 是 指 光 线 的 明亮 程度 ,可 通过 调整 亮度 改善 曝光 效果 。 对 比 度 是 指 颜 色 的 对 比 程 
度 , 对 比 度 值 增加 可 在 一 定 程度 上 增加 图 像 清晰 程度 ,过 度 则 会 产生 失真 。 在 Photoshop 
中 ,如 果 想 对 图 像 的 亮度 和 对 比 度 调整 ,可 以 选择 菜单 "图像 ”调整 ~“ 亮度/ 对比度 ”, 如 
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图 5.63 所 示 。 


(C) “亮度 /对 比 度 ” 对 话 框 


图 5.63 图 像 “亮度 /对 比 度 ” 调 整 


5.3.8 图 像 尺寸 调整 
在 Photoshop 中 ,可 以 通过 更 改 画 布 大 小 和 图 像 大 小 改变 图 像 尺 寸 。 
1. 更 改 画 布 大 小 


在 Photoshop 中 ,图 像 都 是 在 画布 上 进行 显示 和 处 理 的 。 画 布 大 小 其 实 就 是 图 像 文档 
的 尺寸 大 小 ,直接 影响 图 像 文 件 的 大 小 。 当 画布 不 足以 显示 更 多 的 图 像 内 容 时 ,可 以 更 改 画 
布 大 小 。 

选择 菜单 “图 像 ”画布 大 小 ”, 在 弹出 的 “画布 大 小 ?对 话 框 中 设置 新 画布 的 “宽度 ”和 
“高 度 " 尺 寸 。“ 定 位 ?参数 则 用 来 定义 新 画布 的 扩展 方向 ,白色 ?方形 按钮 代表 当前 画布 位 
置 ,四 周 的 箭头 表示 画布 扩展 的 方向 。 在 空格 中 单 击 鼠 标 左 键 ,就 可 以 设置 当前 画布 在 新 画 
布 中 的 位 置 。 

当 新 画布 尺寸 小 于 当前 画布 时 ,图 像 上 部 分 显示 内 容 会 被 裁 掉 ,图 像 信息 丢失 。 当 新 画 
布 尺 寸 大 于 当前 画布 时 ,新 增加 的 画布 可 以 显示 更 多 的 图 像 , 原 有 图 像 不 受 影响 。 更 改 图 像 
的 画布 大 小 如 图 5. 64 所 示 。 


当前 大 小 : 362.7K 
RE: 424 像素 
WM: 292 0E 
新 建 大 小 : 816.1K BEWARE 


wew): HORSES MAY KICK 


高 度 (H); 150 OR BITE! 


口 相对 (R) THANK OF 
sett: 


|= 


pN 


画布 扩展 颜色 :| FR 


图 5.64 更 改 图 像 的 画布 大 小 
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2. 更 改 图 像 大 小 


选择 菜单 "图像 ”~ 图像 大 小 ,弹出 "图像 大 小 "对话 框 , 可 以 更 改 像素 大 小 ,也 可 以 更 
改 文 档 大 小 。 像 素 大 小 是 指 图 像 文件 显示 的 像素 多 少 , 变 大 变 小 会 直接 影响 图 像 的 显示 效 
Re 文档 大 小 是 指 图 像 文档 尺寸 大 小 。 如 果 取 消 “ 图 像 大 小 ”对 话 框 下 方 的 “ 重 定 图 像 像素 ” 
复 选 框 , 则 图 像 像素 大 小 不 变 ,只 能 改变 文档 大 小 , 值 越 大 分 辨 率 越 低 , 图 像 越 模糊 ; 值 越 小 
分 状 率 越 高 ,图 像 越 清 晰 。“ 图 像 大 小 ”对 话 框 如 图 5. 65 所 示 。 


BRAN:816.1K 

宽度 (W): [100 [Both v4. 
高 度 (H): | 100 [sat v js 
文档 大 小 : 

宽度 (D): | | 百分比 


> 
= 8 
高 度 (5): | 100 | 百分比 ~| ] 
分 画素 (B):|22.25 | [Rat M 


缩放 样式 (Y) 
网 约束 比例 (G) 
重 定 图 像 像素 (): 
两 次 立方 (适用 于 平 洽 渐 变 ) 4 


图 5.65 “图 像 大 小 "对话 框 


提示 : 像素 是 构成 位 图 的 基本 单位 ,也 称 为 像 点 ,图 像 中 细节 的 数量 取决 于 其 像素 多 
少 。 而 影响 图 像 清晰 程度 的 是 图 像 分 辨 率 , 即 每 英寸 显示 的 像素 个 数 , 使 用 水 平 像素 X 重 直 
像素 表示 。 


6.4 图 层 和 滤 镜 


使 用 Photoshop 处 理 图 像 的 最 大 优势 是 图 层 ,使 用 图 层 可 以 很 方便 地 修改 图 像 , 简 化 图 
像 编辑 操作 ,还 可 以 创建 各 种 图 层 特效 ,从 而 制作 出 各 种 特殊 效果 。 

滤 镜 是 一 组 完成 特定 效果 的 程序 ,一 个 滤 镜 对 应 一 种 特定 的 效果 ,可 用 来 实现 图 像 的 各 
种 特殊 效果 。 下 面 分 别 进行 介绍 。 


5.4.1 图 层 


图 层 可 以 被 看 做 一 张 背景 透明 的 画 纸 ,将 图 像 的 不 同 部 分 通过 图 层 进行 存放 ,多 个 图 层 
上 下 笃 加 在 一 起 从 而 组 合成 复杂 图 像 。 使 用 图 层 的 优点 是 : 单独 对 某 个 图 层 进行 操作 不 会 
影响 到 图 像 中 的 其 他 图 层 ， 

图 层 的 操作 可 以 通过 图 层面 板 和 图 层 菜单 来 完成 的 。 图 层面 板 显示 了 当前 图 像 的 所 有 
图 层 , 如 图 5. 66 所 示 。 
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(ee x lhe ee) 
图 层 混合 正常 ~ 不 透明 度 :| 100% > 图 层 总 体 不 透明 度 
图 层 锁 定 锁定 : 加 孝 中 会 ”填充 :| 100% > 图 层 内 部 不 透明 度 
s E] a: 
> Ea 7 a 
链接 图 层 一 一 一 一 一 SS fs. oaa 删除 图 层 
添加 图 层 样式 一 一 一 一 创建 图 层 
添加 图 层 蒙 版 创建 新 组 


创建 填充 或 调整 图 像 
图 5.66 图 层面 板 


1. 图 层 类 型 


Photoshop 中 定义 了 多 种 类 型 的 图 层 , 例 如 背景 图 层 、 文 本 图 层 、 调 节 图 层 和 形状 图 层 
等 。 不 同类 型 的 图 层 ,特点 和 功能 不 相同 ,而 且 操作 和 使 用 方法 也 不 尽 相 同 。 下 面 就 来 介绍 
各 种 图 层 类 型 。 

(1) 普通 图 层 和 背景 图 层 

普通 图 层 是 Photoshop 最 常用 的 图 层 ,Photoshop 的 大 部 分 图 像 处 理 功能 都 可 以 对 该 
类 型 的 图 层 实现 。 

单 击 图 层面 板 的 团 按钮 或 选择 菜单 “图 层 ”~~“ 新 建 ”一 "图 层 ”, 弹 出 "新 建 图 层 "对 话 
框 ,设置 图 层 “ 名 称 ”、“ 不 透明 度 " 以 及 “模式 ”参数 后 , 单 击 “ 确 定 ” 按 钮 ,就 可 以 创建 普通 
图 层 。 

背景 图 层 一 般 位 于 图 层面 板 的 最 底部 ,以 斜体 字 “ 背 景 "标识 ,所 有 新 打开 的 图 像 都 是 作 
为 背景 图 层 显 示 在 图 像 窗 口中 的 。 背 景 图 层 是 被 锁定 的 ,图 层面 板 中 的 图 层 混合 模式 、 图 层 
不 透明 度 .填充 不 透明 度 以 及 锁定 属性 不 能 用 来 对 背景 图 层 进行 设置 或 更 改 。 

如 果 要 更 改 背景 图 层 的 不 透明 度 和 图 层 混 合 模式 等 ,需要 将 其 转换 为 普通 图 层 。 选 择 
菜单 “图 层 ”>“ 新 建 ”>“ 背 景 图 层 ”, 在 弹出 “新 建 图 层 ”" 对 话 框 中 设置 图 层 “ 名 称 ”、“ 不 透明 
度 ” 以 及 “模式 ”参数 后 , 单 击 “ 确 定 ” 按 钮 , 即 可 将 其 转换 为 普通 图 层 , 如 图 5. 67 所 示 。 


mi 
(oe x [通道 路径 ] 三 


[Ez ~ | 不 透明 度 : [100% > 


ae gb @ 培 充 : [100% >] 


od 中 


CEA ENEE 


图 5.67 将 “背景 图 层 ” 转 换 为 普通 图 层 ” 
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(2) 文本 图 层 

当 使 用 T 横 排 文字 工具 和 IT 直 排 文字 工具 在 图 层 上 添加 文字 时 ,Photoshop 会 自动 
创建 文本 图 层 。 文 本 图 层 可 以 执行 “缩放 "“ 旋 转 "“ 斜 切 " “变形 ”等 操作 ,如 果 要 想 执行 扭 
曲 、 透 视 或 滤 镜 操作 ,需要 对 其 执行 栅 格 化 "操作 。 

在 图 层面 板 中 单 击 鼠 标 选 中 要 处 理 的 文字 图 层 ,然后 【上 
选择 菜单 “图 层 ”“ 棚 格 化 ”>“ 文 字 ”, 即 可 将 文字 图 层 转 ee vires icon 到 
换 成 普通 图 层 。 如 果 直接 对 文字 执行 滤 镜 操作 ,Photoshop 8: 7 @ a[n >] 
也 会 弹出 提示 对 话 框 , 单 击 “确定 "按钮 ,也 可 以 将 其 转变 为 ” 忆 国 要 : 


MES 


普通 图 层 。 文 字 图 层 如 图 5. 68 所 示 。 sit E 
(3) 调整 图 层 和 填充 图 层 © i xz 


调整 图 层 和 填充 图 层 是 比较 特殊 的 图 层 ,分 别 存储 了 
色彩 ,色调 的 调整 和 填充 信息 ,主要 用 来 调整 图 像 的 色彩 和 
填充 效果 。 调 整 图 层 和 填充 图 层 只 对 位 于 它 下 方 的 图 层 起 图 5.68 文字 图 层 

作用 ,通过 图 层 倒 加 显示 图 像 最 终 修改 效果 。 由 于 没有 改 

变 原 图 像 信息 ,可 以 随时 恢复 图 像 。 

使 用 调整 图 层 修改 图 像 伯 和 度 的 方法 是 : 在 图 层面 板 中 选择 要 处 理 的 图 层 ,然后 选择 
菜单 “图 层 ”> “新建 调整 图 层 ">* 色 相 / 饱 和 度 ”, 在 弹出 的 “新 建 图 层 ”对 话 框 设 园 新 建 调 
整 图 层 的 “名 称 ”“ 不 透明 度 ” 等 参数 ,然后 单 击 "确定 ”按钮 ,在 弹出 “色相 /饱和 度 ” 对 话 框 ， 
设置 “饱和 度 ” 值 为 十 67, 单 击 “ 确 定 ” 按 钮 。 创 建 “ 色 相 / 饱 和 度 ”调整 图 层 修改 图 像 效果 如 
图 5. 69 所 示 。 


sr. 0.3 dB 


| Re x [ 色 析 |[ st | abt | 


(a) 调整 前 (b) 调整 后 (c) 调整 图 层 
图 5. 69 创建 “色相 /饱和 度 ” 调 整 图 层 修改 图 像 


使 用 填充 图 层 进行 渐变 填充 的 方法 是 : 在 图 层面 板 中 单 击 要 处 理 的 图 层 ,然后 选择 菜 
单 “ 图 层 ”>“ 新 建 填充 图 层 ”>“ 渐 变 ”, 在 弹出 的 “新 建 图 层 ” 对 话 框 设置 新 建 调整 图 层 的 “名 
称 ”“ 不 透明 度 ” 等 参数 ,然后 单 击 “确定 ”按钮 ,在 弹出 “渐变 填充 ”对 话 框 中 设置 相应 的 参数 
值 , 单 击 “ 确 定 ” 按 钮 。 人 创建“ 渐变” 填充 图 层 修改 图 像 效 果 如 图 5. 70 所 示 。 

创建 其 他 调整 和 填充 图 层 方法 类 似 , 这 里 不 再 一 一 描述 。 


2. 图 层 操作 
图 层 操 作 包 括 图 层 的 移动 /复制 /删除 、 图 层 锁定 、 图 层 琶 放 次 序 调整 .图 层 链接 、 图 层 合 
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(a) 使 用 渐变 色 填充 后 (b) 填充 图 层 
图 5.70 创建 “渐变 ”填充 图 层 修改 图 像 


并 以 及 图 层 混合 等 操作 ,下 面 分 别 介绍 。 

(1) 图 层 移动 .复制 和 删除 

图 层 移 动 、 复 制 和 删除 是 图 层 最 基本 的 操作 ,在 使 用 Photoshop 处 理 图 像 时 会 经 常用 
到 。 在 进行 图 层 移动 .复制 和 删除 前 ,要 首先 在 图 层面 板 中 单 击 鼠 标 左 键 选择 要 操作 的 

如 果 想 要 移动 图 层 , 单 击 工 具 箱 中 的 移动 图 标 Ms ,然后 将 鼠标 移 到 目标 图 层 所 在 区 域 ， 
单 击 鼠 标 左 键 拖 动 鼠标 ,将 图 层 移 到 适合 的 位 置 。 

如 果 想 要 复制 图 层 , 选 择 菜 单 “ 图 层 ”"|“ 复 制图 层 …”, 弹 出 “复制 图 层 ” 对 话 框 ,“ 为 ”" 参 
数 用 于 设置 复制 后 的 图 层 名 称 。“ 文 档 ” 参 数 用 于 设置 复制 后 的 图 层 存储 的 文件 ,下 拉 列 表 
框 自动 列 出 当前 在 Photoshop 中 已 打开 的 所 有 图 像 文 件 ,如 果 在 下 拉 列 表 框 中 选择 “新 建 ”， 
并 在 “名 称 ” 文 本 框 中 输入 新 文件 名 ,Photoshop 会 新 建 图 像 文件 以 存储 复制 后 的 图 层 。“ 复 
制图 层 ” 对 话 框 如 图 5.71 所 示 。 

如 果 想 要 删除 图 层 ,只 需要 将 选择 的 图 层 拖 动 到 图 层面 板 下 方 的 垃圾 箱 图 标准 位 置 
即 可 。 


复制 : BRO 
为 (A): | ESOP 


目标 
文档 (D): | IMAG2489jpg 
名 称 (NM):| 


图 5.71 “复制 图 层 ” 对 话 框 


(2) 图 层 锁定 

为 了 防止 对 其 他 图 层 处 理 时 对 已 完成 图 层 进行 误 操 作 , 可 以 在 图 层面 板 中 将 已 完成 图 
层 设 置 为 锁定 。Photoshop 提供 了 四 种 类 型 的 锁定 ,包括 锁定 透明 像素 禄 .锁定 图 像 像素 
SF MEU MEDS a 。 

锁定 透明 像素 : 对 图 层 中 的 透明 部 分 进行 锁定 ,此 时 只 能 对 图 像 中 有 像素 的 部 分 进行 
编辑 。 
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锁定 图 像 像素 ; 对 图 层 所 有 部 分 都 不 允许 进行 编辑 ,包括 透明 部 分 和 有 图 像 部 分 。 

锁定 位 置 : 对 图 层 位 置 进行 锁定 ,不 允许 移动 。 

全 部 锁定 , 完全 锁定 图 层 ,此 时 图 层面 板 上 的 图 层 混合 模式 .不 透明 度 、 删 除 图 层 等 功 
能 均 不 能 使 用 。 

锁定 图 层 方法 是 : 首先 在 图 层面 板 中 选择 要 锁定 的 图 
层 单 击 鼠标 左 键 ,然后 在 图 层面 板 中 单 击 对 应 锁定 图 标 ， 
即 可 设置 锁定 类 型 ,同时 会 在 该 图 层 的 右 方 出 现 A 图标。 
如 果 要 解除 锁定 ,只 需 再 次 单 击 相应 的 锁定 图 标 即 可 ,如 
图 5.72 所 示 。 

(3) BRR HCE R 

通常 情况 下 ,最 先 建 的 图 层 位 于 图 层面 板 的 底部 ,最 
后 建 的 图 层 位 于 最 上 层 , 上 面 的 图 层 总 会 迹 住 下 面 的 图 


=r. 0.9 3 8 


层 , 因 此 ,有 时 候 需 要 通过 调整 图 层 的 释放 次 序 ,调整 图 层 te Aleve 
的 显示 效果 。 


调整 图 层 释放 次 序 的 方法 是 : 在 图 层面 板 中 单 击 鼠 标 左 键 , 选 中 要 调整 的 图 层 , 然 后 单 
击 鼠 标 左 键 将 图 层 拖 动 到 合适 位 置 ,如 图 5.73 所 示 。 


‘Ge = BE) 污 
正常 v REAR: 100% > 
we OF @ IAF: 100% + 


(a) 原 图 (b) 调整 后 (0) 在 “图 层 ” 面板 调整 图 层 倒 放 次 序 


图 5.73 WERZA? 


(A) 图 层 链接 和 合并 

如 果 想 同时 对 多 个 图 层 进行 移动 翻转、 自由 变换 和 旋转 操作 ,可 以 设置 多 个 图 层 链接 ， 
链接 后 的 图 层 可 以 执行 相同 操作 。 

在 图 层面 板 中 , 单 击 鼠 标 左 键 并 按 下 Shift 键 以 选中 要 链接 的 图 层 , 然 后 单 击 图 层面 板 
下 方 的 链接 图 标 e ,此 时 链接 图 层 右 方 显示 SS 图 标 。 如 果 想 解除 链接 ,选中 链接 的 图 
层 , 然 后 再 次 单 击 图 层面 板 下 方 的 链接 图 标 Se 即 可 ,如 图 5.74 所 示 。 


ES 


f EE x e E 


Bsta 


图 5.74 链接 图 层 
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在 处 理 图 像 时 ,如 果 不 再 需要 对 图 层 进行 修改 ,可 以 将 图 层 合并 ,节省 缓存 盘 上 的 空间 ， 
提高 Photoshop 程序 的 运行 速度 。 

Photoshop 支持 三 种 合并 方式 : 向 下 合并 、 合 并 可 见 图 层 和 拼合 图 层 。 

向 下 合并 : 将 当前 图 层 和 其 下 一 层 图 层 进行 合并 。 

合并 可 见 图 层 : 将 所 有 标识 为 苹 图 标的 可 见 图 层 进行 合并 ,隐藏 图 层 不 合并 。 

拼合 图 层 : 合并 所 有 图 层 , 如 果 有 隐藏 图 层 ,弹出 对 话 框 
提示 。 

在 图 层面 板 中 选择 想 要 合并 的 图 层 ,然后 选择 菜单 “图 
层 ” 一 “向 下 合并 ?或 “图 层 " 一 “合并 可 见 图 层 ? 或 “图 层 ” 一 “ 拼 
合 图 层 ”, 执 行 图 像 合 并 操作 ,如 图 5. 75 所 示 。 

(5) 图 层 混合 

在 混合 图 层 时 ,图 层面 板 中 的 不 透明 度 .填充 和 混合 模式 
属性 可 用 来 制作 与 众 不 同 的 图 像 合 成 效果 。 

不 透明 度 : 设置 图 层 总 体 不 透明 度 。 

填充 : 设置 图 层 内 部 不 透明 度 。 

混合 模式 : 指 当前 图 层 与 其 他 图 层 秋 加 时 ,不 同 图 层 中 的 像素 如 何 进行 混合 。 
Photoshop 存储 了 24 种 混合 模式 ,可 以 通过 混合 模式 的 下 拉 列 表 框 进行 选择 。 


3. 图 层 蒙 版 


图 层 蒙 版 是 进行 图 像 合 成 时 常用 的 技术 ,使 用 该 技术 在 不 更 改 原 图 的 基础 上 控制 图 层 
的 部 分 显示 或 者 隐藏 。 在 蒙 版 中 ,黑色 部 分 表示 隐藏 图 层 中 的 图 像 , 白 色 部 分 表示 显示 图 层 
中 的 图 像 ,渐变 色 部 分 则 表示 逐渐 显示 图 层 中 的 图 像 。 

为 图 层 添加 蒙 版 方法 是 : 在 图 层面 板 中 ,首先 选择 要 应 用 蒙 版 的 图 层 , 然 后 单 击 图 层面 
板 下 方 的 回 图 标 , 选 中 的 图 层 右边 会 显示 一 个 矩形 框 ,该 矩形 框 表示 添加 的 蒙 版 。 接 下 来 
在 图 层面 板 中 选择 左边 的 图 层 图 标 , 当 矩形 图 标 四 周 出 现 边框 ,表示 被 选中 。 使 用 选区 工具 
在 图 像 窗 口 将 需要 隐藏 的 区 域 创建 为 选区 ,然后 在 图 层面 板 中 选择 当前 图 层 右边 的 蒙 版 图 
标 , 并 在 工具 箱 中 选择 画笔 工具 ,设置 前 景色 为 黑色 ,在 选区 内 绘图 ,选区 内 的 图 像 即 会 消 
失 。 如 果 设 置 画笔 颜色 为 白色 进行 绘图 , 则 会 将 之 前 消失 的 图 像 焦 复出 来 。 使 用 图 层 蒙 版 
隐藏 图 像 如 图 5. 76 所 示 。 
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图 5.76 使 用 图 层 蒙 版 隐藏 图 像 
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如 果 要 删除 添加 的 蒙 版 ,只 需要 在 图 层面 板 中 选 
中 要 删除 的 蒙 版 图 标 ,然后 单 击 图 层 下 方 的 垃圾 桶 图 | LN seenen 
标 , 弹 出 删除 蒙 版 提示 窗口 , 单 击 * 删 除 ? 按 钮 , 即 可 删 CHC Cae 
除 蒙 版 而 不 会 影响 原来 图 层 。 删 除 蒙 版 提示 窗口 如 
图 5.77 所 示 。 


图 5.77 删除 蒙 版 提示 窗口 


4. 图 层 样 式 


为 图 层 添加 图 层 样式 ,可 以 创建 出 特殊 的 修饰 效果 。Photoshop 提供 了 “阴影 "“ 内 发 
光 ”“ 外 发 光 ”“ 和 斜面 和 浮雕 ”等 样式 ,介绍 如 下 。 

(1)“ 投 影 " 和 “内 阴影 "样式 

可 以 增加 图 层 的 层次 感 ,通常 应 用 到 文字 ,按钮 以 及 边框 的 制作 中 。 投 影 是 添加 图 层 边 
缘 以 外 的 阴影 效果 ,内 阴影 则 是 添加 图 层 边缘 以 内 的 阴影 效果 。 

(2)“ 内 发 光 ” 和 “外 发 光 ” 样 式 

可 以 对 图 层 边缘 添加 发 光 效 果 。 内 发 光 是 对 图 层 边缘 以 内 添加 发 光 效 果 。 在 内 发 光 的 
属性 中 增加 了 “ 源 ”, 用 来 设置 中 心 发 光 或 边缘 发 光 。 外 发 光 是 对 图 层 边 缘 以 外 添加 发 光 
效果 。 

(3)“ 和 斜面 和 浮雕 ”样式 

可 以 为 图 层 的 边缘 添加 高 光 和 暗 调 ,从 而 在 图 层 的 边缘 产生 立体 的 斜面 效果 或 浮雕 
效果 。 

(4)“ 光 泽 ” 样 式 

可 以 为 图 层 的 上 方 添加 波浪 形 或 者 绸 维 效 果 。 

(5) “颜色 释 加 ”“ 渐 变 释 加” 和“ 图案 秋 加 ”样式 

可 以 为 图 层 添加 颜色 \ 渐 变色 以 及 图 案 的 县 加 效果 。 

(6)“ 描 边 ” 样 式 

使 用 纯色 、 渐 变色 或 图 案 为 图 层 边缘 描绘 轮廓 。 

为 图 层 添 加 图 层 样 式 的 方法 是 : 首先 在 图 层面 板 中 选择 图 层 , 然 后 单 击 图 层面 板 下 方 
的 Pe, 图 标 ,弹出 图 层 样 式 菜单 , 单 击 鼠 标 左 键 选择 要 应 用 的 样式 ,然后 在 弹出 的 “图 层 样 
式 ” 对 话 框 中 设置 相应 属性 参数 即 可 。 此 时 ,图 层面 板 中 该 图 层 下 面 会 显示 出 添加 的 样式 名 
称 ,如 图 5.78 所 示 。 

如 果 要 修改 图 层 样式 ,需要 在 图 层面 板 中 双击 图 层 样式 名 称 ,在 弹出 的 “图 层 样式 ”对 话 
框 中 更 改 设置 。 如 果 要 删除 图 层 样式 ,同样 在 图 层面 板 中 单 击 图 层 样式 ,然后 单 击 图 层面 板 
下 方 的 垃圾 桶 图 标 置 即 可 。 

在 图 5.78 中 ,“ 图 层 样式 ”对 话 框 中 的 “投影 样式 参数 介绍 如 下 : 

混合 模式 : 阴影 和 图 层 混 合 显示 的 效果 ,在 其 右 侧 有 一 颜色 框 , 单 击 设置 投影 颜色 。 

不 透明 度 : 阴影 的 不 透明 度 , 值 越 大 阴影 颜色 越 深 。 

角度 : 光线 照明 角度 ,阴影 方向 会 随 光 照 角度 的 变化 而 发 生变 化 。 

使 用 全 局 光 : 为 同一 图 像 的 所 有 图 层 样 式 设置 相同 的 光线 照明 角度 。 

距离 : 阴影 与 图 层 的 距离 。 

扩展 : 光线 的 强度 , 值 越 大 ,投影 效果 越 强 烈 。 
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图 5.78 图 层 样 式 设置 


大 小 : 阴影 柔 化 程度 , 值 越 大 ,和 柔 化 程度 越 大 。 

等 高 线 : 用 来 对 阴影 部 分 做 进一步 设置 。 单 击 弹 出 “等 高 线 " 编 辑 器 ,等 高 线 的 高 处 对 
应 阴影 上 的 暗 圆 环 , 低 处 对 应 阴影 上 的 亮 圆 环 。 

杂 色 : 对 阴影 部 分 添加 随机 的 透明 点 。 

图 5.79 给 出 了 对 文字 图 层 添 加 的 “投影 " "浮雕 ”和 "渐变 笃 加 ”样式 。 


湖光山色 湖光山色 


湖光山色 


(a)“ 投 影 ” 样 式 效果 (b) FRE” PERAR (c) MEREM” FEAR 


图 5.79 对 文字 图 层 添 加 图 层 样式 


5.4.2 iB 


滤 镜 通过 改变 图 像 的 像素 数据 ,实现 图 像 特殊 人 处理 效果 。Photoshop 提供 的 内 置 滤 镜 
主要 分 类 放置 在 滤 镜 菜单 中 ,使 用 时 操作 简单 ,只 需 从 该 菜单 中 选择 相应 的 滤 镜 ,设置 相关 
参数 , 即 可 实现 丰富 的 图 像 特殊 效果 。Photoshop 也 允许 使 用 第 三 方 厂商 生产 的 滤 镜 , 称 为 
外 挂 滤 镜 。 外 挂 滤 镜 品种 繁多 ,功能 强大 ,能 够 满足 设计 人 员 更 多 方面 需求 。 

使 用 滤 镜 时 需要 注意 : 如 果 仅 是 针对 图 像 局 部 应 用 滤 镜 ,而 不 是 图 像 整体 , 则 需要 使 | 
区 工具 设 定 选 取 范 围 。 

Photoshop CS3 提供 了 以 下 14 组 滤 镜 ,每 组 又 包括 多 个 滤 镜 。 

风格 化 : 包含 9 种 滤 镜 ,通过 替换 像素 .增加 相 邻 像素 对 比 度 ,产生 夸张 的 效果 。 

画笔 描 边 : 包含 8 种 滤 镜 ,其 中 一 部 分 滤 镜 产生 绘画 效果 ,另外 滤 镜 则 可 以 添加 颗粒 、 
绘画 ,边缘 细节 或 纹理 。 
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模糊 : 包含 11 种 滤 镜 ,通过 降低 相 邻 像素 的 对 比 度 使 图 像 产生 模糊 效果 。 

扭曲 : 包含 13 种 滤 镜 ,可 以 对 图 像 进行 几何 扭曲 ,创建 三 维 或 其 他 变形 效果 。 

锐 化 : 包含 5 种 滤 镜 , 通 过 增强 相 邻 像素 的 对 比 度 使 模糊 的 图 像 变 得 清晰 。 

视频 : 包含 2 种 滤 镜 ,将 普通 图 像 转换 成 视频 设备 可 以 接受 的 图 像 。 

素描 : 包含 14 种 滤 镜 ,可 以 用 来 模拟 素描 和 速写 等 艺术 效果 或 手绘 外 观 。 

纹理 : 包含 6 种 滤 镜 ,可 以 给 图 像 添加 龟 裂 马赛克、 颗粒 等 纹理 图 案 。 

像素 化 : 包含 7 种 滤 镜 , 将 图 像 转换 成 带 有 色 块 的 区 域 ,从 而 产生 晶 格 状 、 碎 片 马赛 到 
等 效果 。 

TYE: 包含 5 种 滤 镜 ,可 以 用 来 创建 纤维 、 云 彩 、 光 照 以 及 镜头 光 尝 等 效果 。 

艺术 效果 : 包含 15 种 滤 镜 ,模拟 彩色 铅笔 .蜡笔 油画 以 及 木刻 等 作品 特殊 效果 。 

RE: 包含 5 种 滤 镜 , 杂 色 是 随机 分 布 的 彩色 像素 点 ,通过 在 图 像 上 添加 或 删除 杂 色 除 
RENZ E AVE 。 

其 他 : 包含 5 种 滤 镜 ,可 以 让 用 户 创 建 自己 的 滤 镜 ,使 用 滤 镜 修改 蒙 版 或 者 在 图 像 中 使 
选区 发 生 位 移 并 快速 调整 颜色 。 

Digimarc: 包含 2 种 滤 镜 ,可 以 将 数字 水 印 嵌 入 到 图 像 中 以 存储 版 权 信 息 。 

除 此 之 外 ,Photoshop CS3 还 提供 了 4 种 功能 强大 的 工具 滤 镜 : 抽出 滤 镜 ( 用 于 抠 图 )、 
液化 滤 镜 (用 于 各 种 变形 ) .图 案 生成 器 滤 镜 (用 于 制作 各 种 图 案 ) 和 消失 点 滤 镜 (用 于 构建 平 
面 的 空间 模型 ) 。 

图 5. 80 给 出 分 别 使 用 * 径 向 模糊 “水 波 扭曲 "浮雕 ? 滤 镜 制作 的 效果 。 


(a)“ 径 向 模糊 ” 滤 镜 效果 (b)“ 水 波 扭曲 ” 滤 镜 效果 


图 5.80 使 用 滤 镜 处 理 图 像 


(c)“ 浮 雕 ” 滤 镜 效果 


6.5 图 像 处 理 实例 


5.5.1 制作 网 页 导航 菜单 


网 站 的 导航 菜单 主要 用 于 引导 用 户 打开 相关 页 面 , 是 网 站 构建 不 可 或 缺 的 元 素 。 设 计 
精美 的 导航 菜单 给 人 以 赏心悦目 的 效果 ,网 页 设计 人 员 通 常会 使 用 专业 的 设计 软件 进行 导 
航 菜单 的 设计 。 下 面 给 出 使 用 Photoshop 制作 导航 菜单 的 详细 步骤。 

(1) 启动 Photoshop, 选 择 菜单 “文件 ”>“ 新 建 …”, 在 弹出 的 “新 建 ” 对 话 框 中 设置 宽度 
为 800 像素 ,高 度 为 22 像素 ,背景 内 容 设 为 透明 , 单 击 “ 确 定 ” 按 钮 ,如 图 5. 81 所 示 。 
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预 设 (P): | BE 


存储 预 设 (3).… 


宽度 (W); 
SRH): 
BBFE(R): 96. Ek 


FRASO: i 


高 级 


图 5.81 创建 新 文件 


(2) 在 工具 箱 中 选择 油漆 桶 工具 O ,手动 设置 前 景色 的 R、G、B 值 分 别 为 187、224、 
227 ,使 用 前 景色 填充 图 像 窗口 ,如 图 5. 82 所 示 。 


RER ARE) 


新 的 
[0] 

mer 

c J©OH: | 184 | 度 OL: |87 

Os: [18 |% Oa: |-12 

Os: [89 |% Ob: |-6 

Or: Ti Cl25 

加 OG: |224 M:|1 


Os: |227 y:|10 
ORA Web ae, 


= | bbe0e3 K: |o 


"导航 菜单 @ 200% (图 层 1, RGB/8) 


图 5.82 填充 图 像 窗 口 


(3) 在 工具 箱 中 选择 矩形 工具 国 ,在 属性 栏 单 击 “ 颜 色 ” 方 框图 标 ,在 弹出 的 对 话 框 中 
设置 填充 颜色 的 R、G、B 值 分 别 为 0、204、153, 接 下 来 在 图 像 窗 口 绘制 矩形 区 域 。 然 后 将 图 
层面 板 切 换 到 路 径 面 板 , 单 击 面板 下 方 的 澡 图 标 , 将 路 径 作 为 选区 载 入 ,如 图 5. 83 所 示 。 

(4) 在 图 层面 板 中 选中 矩形 区 域 所 在 图 层 , 单 击 鼠 标 右键 ,在 弹出 菜单 中 选择 “ 栅 格 化 
图 层 ”。 然 后 双击 图 层 名 称 将 其 更 改 为 “首页 ”, 如 图 5. 84 所 示 。 

(5) 在 工具 箱 中 选择 横 排 文字 工具 下 ,创建 文字 图 层 。 设 置 “字体 ”“ 大 小 ”和 “颜色 ”为 
黑体 .12、 黑 色 , 然 后 输入 “首页 "文字 ,并 将 其 移 到 “首页 ”图 层 位 置 。 重 复 本 步骤 ,创建 多 个 
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(Cae mi Bee | = 
EH IRESE 


BREH... 
混合 选项 . 


复制 图 层 . . 
删除 图 层 


转换 为 智能 对 象 


栅 格 化 图 层 


图 5.84 更 改 图 层 名 称 


文字 图 层 , 分 别 输入 * 站 点 地 图 ”“ 关 于 我 们 ”“ 登 录 | 注册” 文字 ,并 移动 到 合适 的 位 置 。 其 
中 ,“ 登 录 | 注 册 ” 字 体 大 小 设置 为 9, 如 图 5. 85 所 示 。 


| E = mia [路径 | 
ER S RAAE: [0% >) 


站 点 地 图 RFRA 


Esco O 


图 5.86 使 用 “切片 工具 ”分 割 图 像 


(7) 选择 菜单 “文件 ”存储 为 Web 和 设备 所 用 格式 ”, 选 择 文件 类 型 为 JPEG 格式 ， 
然后 单 击 “ 存 储 ” 按 钮 ,在 打开 的 “将 优化 结果 另存 为 ”窗口 中 将 保存 类 型 设置 为 “ 仅 图 像 ”, 最 
后 单 击 “ 保 存 ” 按 钮 ,如 图 5. 87 所 示 。 

(8) 最 终 , 导 航 菜单 被 分 别 导 出 成 JPEG 图 像 ,如 图 5. 88 Bras. 
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Vs 


FA 5.87 输出 图 像 


DER 
XED MEO FEV KEW IAV Hoo Ar 
Qa- O & Orr (xex 国 - 
Hit @) [E D: imaces o > #3 


I 图 片 任务 


T 作为 幻灯 片 查看 
O 联机 订购 照片 
贡 打印 该 图 片 
Q 设 为 点 面 青 最 


文件 和 文件 夹 任务 

a) Restart 

i Baar 

D 复 和 这 个 文件 

@ RETRE 
rl 

O 出 电子 地 件 形式 发 送 

D ean 


站 点 地 图 


导航 菜单 01. jpzg z 导航 菜单 _03. jpe 


errr Se 
| 尺寸 : 79 x 22 类 型 : AcDsee JPEG 图 像 大 小 : 1.13 KB y 我 的 电脑 


图 5.88 JPEG 格式 的 导航 菜单 


5.5.2 美化 网 页 图 像 


在 网 页 中 ,添加 图 片 会 起 到 修饰 网 页 ,美化 页 面 的 效果 。 使 用 Photoshop 可 以 帮助 设计 
人 员 设 计 出 精美 的 图 片 。 下 面 举例 说 明 如 何 使 用 Photoshop 修饰 .美化 图 片 。 

(1) 启动 Photoshop ,选择 菜单 “文件 ”~ 打开 …”, 打 开 * 背 景 .jpg"” 文 件 。 

(2) 在 工具 箱 中 选择 横 排 文字 工具 了 T ,设置 “字体 ”“ 大 小 ”和 “颜色 ”为 黑体 、31、 白 色 ， 
然后 输入 “咱们 走 着 瞧 一 欢迎 沃克 健身 俱乐部 "文字 ,使 用 鼠标 将 文字 图 层 移 到 合适 位 置 。 
然后 选择 菜单 “图 层 ”“ 栅 格 化 ”一 “文字 ”, 对 文字 图 层 执行 “ 栅 格 化 ”操作 ,如 图 5. 89 所 示 。 

(3) 在 图 层面 板 中 选择 文字 所 在 的 图 层 , 单 击 图 层面 板 下 方 的 A 图 标 ,为 该 图 层 添加 
“斜面 与 浮雕 ”样式 。 在 “图 层 样式 ”对 话 框 中 ,设置 “深度 ”为 62%,“ 方 向 ”为 “下 ”,“ 大 小 ”为 
1,“ 软 化 ”为 0.“ 阴影 角度 ”为 一 39 度 ,“ 阴 影 模式 ”为 正常 “阴影 颜色 ”为 红色 ,“ 不 透明 度 ” 为 
100% , 单 击 “ 确 定 ” 按 钮 ,如 图 5. 90 所 示 。 


~ banner. jpg @ 100% 《咱们 走 着 瞧 一 欢迎 光临 沃克 俱乐部 ， RCB/BE) 


图 5.89 添加 文字 


图 5. 90 ”为 文字 添加 “斜面 与 浮雕 "样式 


(A) 选择 菜单 “图 层 ”>“ 新 建 ”>“ 图 层 ”, 为 该 图 层 命名 为 蓝天 ”。 在 工具 箱 中 选择 矩 
WEE Tf) ,绘制 矩形 选区 。 然 后 在 工具 箱 中 选择 吸管 工具 A ,在 图 像 中 蓝天 区 域 单 
击 鼠 标 左 键 ,将 蓝 色 设置 为 前 景色 ,然后 使 用 油漆 桶 工具 填充 矩形 区 域 ,如 图 5. 91 所 示 。 

O 选择 菜单 “图 层 ”>“ 新 建 ”>“ 背 景 图 层 ”, 将 背景 图 层 转 换 成 普通 图 层 , 并 命名 为 
“图 层 0”, 然 后 单 击 “ 蓝 天 ”图 层 , 将 其 拖 动 到 “图 层 0” 的 下 方 ,如 图 5. 92 所 示 。 


» banner. jpg @ 100% (X, RGB/8#) 


Mitek mote eee = 


图 5.91 创建 “蓝天 ”图 层 


(6) 选中 “图 层 0 图 层 , 然 后 选择 菜单 “图 层 ” “图 层 蒙 版 ”显示 全 部 ”为 "图 层 0” 
添加 蒙 版 。 在 图 层面 板 中 , 单 击 蒙 版 图 标 , 此 时 蒙 版 图 标 外 侧 出 现 矩形 框 ,表示 已 经 选中 蒙 
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图 5.92 调整 “蓝天 ”图 层次 序 
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版 。 在 工具 箱 中 选择 渐变 工具 国 ,在 “渐变 编辑 器 ”中选 
择 “ 黑 白 ” 渐 变 , 在 下 方 颜色 条 中 ,设置 左边 的 不 透明 色 标 的 
不 透明 度 为 100% ,右边 的 不 透明 色 标 的 “不 透明 度 ” 为 
20%,“ 位 置 ”为 67% ,然后 在 图 像 窗 口中 的 蓝天 区 域 进 行 
线性 填充 ,如 图 5.93 所 示 。 

(7) 选择 菜单 “图 层 ”>“ 拼 合 图 层 ”, 将 图 层面 板 中 的 
图 层 拼合 成 一 个 图 层 ,然后 选择 菜单 “图 像 ? 一 “调整” 一 “ 亮 
度 / 对 比 度 ”, 在 “亮度 /对 比 度 ”对 话 框 中 设置 “亮度 ”为 30， 
如 图 5. 94 所 示 。 


| DE ~ 【通道 | 路径 | 
[E 司 | 不 通明 度 :| 100% 


> 
> 


me: Ob @ 填充 :| 100% 
2 CO Sine eters... 
里 效果 
> Hw 


pa 


corr 


欢迎 光临 沃克 俱乐部 “~ 


(c) 创 


建 “蓝天 "效果 


图 5.93 使 用 蒙 版 创建 “蓝天 ”效果 


| tire x [通道 | 路径 | = 
asta 


s A Oa a 9 


口 使 用 |B 版 (U) 


图 5.94 i 


(8) 选择 菜单 “文件 ”>“ 存 储 为 ”, 将 其 保存 为 “banner. jpg”, 最 终 效果 如 图 5. 95 所 示 。 


f 合 图 层 并 设置 亮度 


图 5. 


最 终 效果 


95 


第 5 章 ”Photoshop 基 础 


5.5.3 制作 网 页 效果 图 


在 进行 网 站 设计 时 ,需要 反复 和 客户 进行 界面 交流 ,这 时 可 以 使 用 Photoshop 制作 出 网 
页 效果 。 网 页 效果 图 以 直观 的 界面 .美观 的 设计 ,让 客户 简略 了 解 网 站 功能 和 界面 风格 。 下 


面 举例 说 明 如 何 使 用 Photoshop 制作 网 页 效果 。 


(1) 启动 Photoshop ,选择 菜单 "文件 ”一 “存储 为 ”新建 1000X 600 像素 文件 , 单 击 “ 确 


定 ” 按 钮 ,如 图 5. 96 所 示 。 


SHRM): | 沃克 俱乐部 网 站 效果 
预 设 (P): 自 定 


EHOW 


宽度 (W):| 1000 像素 
高 度 (H): 600 ge 


Device Central(E)... 


分 辩 军 (R):|72 || RSET 
颜色 模式 (M):| ROB Me 。 | | 8 位 
BRAS): | 透明 


vj 高 级 


图 5.96 新 建文 件 


(2) 选择 菜单 “视图 ”>“ 标 尺 ”, 在 图 像 窗 口 四 周 显示 标尺 信息 ,方便 精确 作 图 。 在 标尺 


位 置 单 击 鼠 标 右键 ,弹出 菜单 ,设置 标尺 单位 为 “像素 ”, 如 图 5. 97 所 示 。 


N 沃克 俱乐部 网 站 效果 @ 66.7% (图 层 1，R6B/8) 
Tse, loo fo fo iso, fso [oo Po oo so 


图 5.97 设置 标尺 单位 
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(3) 在 工具 箱 中 选择 油漆 桶 工具 念 ,设置 前 景色 R、G、B 值 分 别 为 0、204、153, 然 后 填 
充 夯 布 ,如 图 5. 98 所 示 。 


; 沃克 俱乐部 网 站 效果 @ 66.7% (HE 1, RGB/8) 


We FPA FAN et Whe EO FRAT FDAN WR EA AA Pt WR Sma 


(66.67% [8 文档 :1.72M/D 字 节 > 
图 5.98 使 用 填充 工具 填充 


(4) 选择 菜单 “文件 ”打开 ,打开 在 5. 5. 2 小 节 中 制作 的 banner. jpg 图 像 ,选中 * 背 
景 ? 图 层 , 单 击 鼠 标 右键 ,在 弹出 菜单 中 单 击 * 复 制图 层 ”, 设 置 “ 复 制图 层 " 对 话 框 中 的 目标 文 
件 为 “沃克 俱乐部 网 站 效果 ”, 将 当前 图 层 复 制 到 * 沃 克 俱 乐 部 网 站 效果 ”图 像 中 ,如 图 5. 99 
所 示 。 


5.99 复制 banner. jpg 图 像 到 “沃克 俱乐部 网 站 效果 ”图 像 中 


(5) 切换 到 “沃克 俱乐部 网 站 效果 ”图 像 窗口 中 ,双击 复制 的 图 层 名 称 将 其 重 命 名 为 
banner, 并 使 用 工具 箱 中 的 移动 工具 3 将 其 移动 到 合适 的 位 置 ,如 图 5. 100 所 示 。 

(6) 重复 执行 步骤 (4) 和 (5) ,将 5. 5. 1 小 节 中 制作 的 所 有 导航 菜单 图 像 都 复制 到 “沃克 
俱乐部 网 站 效果 ”图 像 文件 中 ,然后 对 图 层 分 别 重 命名 为 “空白 导航 菜单 1”"“ 首 页 ”"“ 站 点 
地 图 ”“ 关 于 我 们 ”“ 空 白 导航 菜单 2”“ 登 录 ”“|”“ 注 册 ”“ 空 白 导航 菜单 3”, 并 将 其 调整 
到 合适 位 置 ,如 图 5. 101 所 示 。 
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图 5.101 


(7) TEPER A JR" 


复制 导航 菜单 图 像 到 “沃克 俱乐部 网 站 效果 "图 像 中 


“新 建 ” 一 “图 层 ”, 命 名 为 container。 选 中 该 图 层 ,选择 工具 箱 中 


的 矩形 选 框 工具 ,创建 800X250 像素 的 选区 ,使 用 油漆 桶 工具 仿 对 其 填充 ,填充 颜色 
R.G.B 值 为 187、224、227, 按 住 Ctrl+D 键 取消 选区 ,如 图 5. 102 所 示 。 


图 5.102 创建 container 图 层 
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(8) 选择 工具 箱 中 的 横 排 文字 工具 T ,设置 字体 、 大 小 和 颜色 为 黑体 、14、 黑 色 , 然 后 输 
和 人 文字 “活动 交流 ”, 选 择 移动 工具 疼 将 其 移动 合适 位 置 。 重 复 本 步骤 ,创建 多 个 文字 图 层 ， 


分 别 输入 文字 “技术 & 装备 ”“ 休 闲 驿 站 ”和 “网 站 事务 ”, 并 调整 到 合适 位 置 ,如 图 5. 103 
所 示 。 
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图 5.103 创建 文字 图 层 


(9) 重复 步骤 (7) ,新 建 800X70 像素 的 图 层 , 命 名 为 footer, 使 用 油漆 桶 工具 进行 填充 ， 
填充 颜色 R.G.B 值 为 187、224、227, 如 图 5. 104 所 示 。 


n 沃克 俱乐部 网 站 效果 @ 100% (footer, RGB/8) 


图 5.104 创建 footer 图 层 


(10) 选择 工具 箱 中 的 横 排 文字 工具 T ,创建 文字 图 层 。 设 置 字体 、 大 小 和 颜色 为 黑 
体 、10、 黑 色 , 然 后 输入 文字 “联系 我 们 | Email: webmaster@ walkerclub. net” 和 “管理 员 入 
口 ”, 选 择 移动 工具 Ms 将 其 移动 到 合适 位 置 。 
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AD 选择 菜单 “文件 ”1“ 存 储 为 ”", 将 其 保存 为 “沃克 健 走 俱乐部 效果 . jpg”。 网 站 最 终 
效果 如 图 5. 105 所 示 。 
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联系 我 们 | Email: webmaster@walkerclub. net 
i 管理 员 入 口 


图 5.105 ”最终 网 站 效果 图 


图 像 在 网 页 中 起 到 美化 和 点 睛 的 作用 ,掌握 Photoshop 的 图 像 处 理 方法 对 设计 网 页 , 美 
化 网 页 界面 起 到 重要 作用 。 

本 章 首先 介绍 了 Photoshop 工具 箱 中 各 种 工具 的 基本 功能 ,以 及 如 何 应 用 这 些 工具 创 
建 选区 .绘制 及 修饰 图 像 ,掌握 这 些 工 具 是 进行 图 像 处 理 的 基础 。 本 章 还 介绍 了 Photoshop 
中 图 像 基 本 操作 和 利用 图 层 进行 图 像 处 理 的 基本 知识 ,对 这 些 知 识 的 理解 为 图 像 进一步 处 
理 葛 定 了 理论 基础 。 本 章 还 对 滤 镜 知识 进行 了 简单 的 介绍 ,使 用 滤 镜 能 获得 对 图 像 处 理 的 
特殊 效果 。 最 后 ,为 了 更 好 理解 和 掌握 网 页 图 像 处 理 过 程 ,本 章 以 实例 为 基础 详细 介绍 了 网 
页 导航 菜单 、 网 页 图 像 美化 以 及 制作 网 页 效果 图 的 操作 步 又。 

通过 本 章 的 学 习 , 读 者 能 初步 掌握 网 页 图 像 处 理 的 基础 知识 ,对 网 页 图 像 的 高 级 处 理 仍 
需 读者 查阅 更 多 资料 完成 。 


习题 


1. Photoshop 是 公司 出 品 的 用 于 进行 处 理 的 工具 。 
2. 历史 记录 画笔 工具 主要 用 于 进行 处 理 的 工具 。 
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9, 


. 对 图 像 进行 渐变 色 填 充 应 该 使 用 工具 完成 。 
. 对 选区 羽化 的 主要 目的 是 
. 容 差 是 工具 用 来 创建 选区 需要 设置 的 参数 。 
A. HETH B. 套 索 工具 C. 磁性 套 索 工具 
. 制作 图 像 的 镜像 效果 ,可 以 选择 下 面 变换 实现 。 
A. RH B. 水 平 翻 转 C. 垂直 翻转 
. 使 图 像 颜 色 更 鲜艳 ,需要 对 图 像 的 进行 处 理 。 
A. 明度 B. 饱和 度 C. 亮度 
. 采用 工具 可 以 修复 有 瑕 症 的 图 像 。 


A. 图 案 图 章 工 具 B. 画笔 修复 工具 OC. 加 深 工 具 


D. 


D. 


. 魔 棒 工 具 


缩放 


. 色相 


.油漆 桶 工具 


任 选 两 个 图 像 ,使 用 图 层 蒙 版 将 其 合成 一 个 图 像 ,存储 为 JPEG 格式 。 
10. 自己 设计 一 个 网 页 效果 图 。 
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6. 1 初 识 Dreamweaver 
— 


Adobe Dreamweaver CS5 是 一 款 集 网 页 制作 和 管理 网 站 于 一 身 的 所 见 即 所 得 网 页 编 
辑 器 ,Dreamweaver CS5 是 针对 专业 网 页 设计 师 特 别 发 展 的 视觉 化 网 页 开发 工具 ,利用 它 
可 以 轻而易举 地 制作 出 跨越 平台 限制 和 跨越 浏览 器 限制 的 充满 动感 的 网 页 。 


6.1.1 Dreamweaver 工作 流程 概述 
用 户 可 以 使 用 很 多 种 方法 来 创建 Web 站 点 ,图 6. 1 所 示 是 一 般 网 站 制作 的 流程 。 


规划 和 设置 站 点 


组 织 和 管理 站 点 文件 


i i 
设计 网 页 布局 通过 手动 编码 创建 页 面 
1 
向 页 面 添加 内 容 
į 
针对 动态 内 容 
设置 Web 应 用 程序 
创建 动态 页 
i 
测试 和 发 布 


图 6.1 一 般 网 站 制作 的 流程 


1. 规划 和 设置 站 点 


确定 将 在 哪里 发 布 文件 ,检查 站 点 要 求 ,访问 者 情况 以 及 站 点 目标 。 此 外 ,还 应 考虑 诸 
如 用 户 访问 以 及 浏览 器 ,插件 和 下 载 限制 等 技术 要 求 。 在 组 织 好 信息 并 确定 结构 后 ,就 可 以 
开始 创建 站 点 。 
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2. 组 织 和 管理 站 点 文件 
借助 Dreamweaver 提供 的 站 点 管理 功能 ,根据 需要 更 改组 织 结构 。 
3. 设计 网 页 布局 或 者 通过 手动 编码 的 方法 创建 页 面 


选择 要 使 用 的 布局 方法 ,或 综合 使 用 Dreamweaver 布局 选项 创建 站 点 的 外 观 。 设 计 完 
页 面 后 要 向 页 面 添 加 内 容 , 如 文本 .图 像 . 鼠 标 经 过 图 像 、 图 像 地 图 .颜色 .影片 声音、 
HTML 链接 、. 跳 转 菜单 等 。 手 动 编写 页 面 的 代码 是 创建 页 面 的 另 一 种 方法 。Dreamweaver 
提供 了 易于 使 用 的 可 视 化 编辑 工具 ,同时 也 提供 了 高 级 的 编码 环境 ,可 以 采用 任 一 种 方法 
(或 同时 采用 这 两 种 方法 ) 来 创建 和 编辑 页 面 。 


4. 针对 动态 内 容 设置 Web 应 用 程序 


许多 Web 站 点 都 包含 了 动态 页 ,动态 页 使 访问 者 能 够 查看 存储 在 数据 库 中 的 信息 ,并 
且 一 般 会 允许 某 些 访问 者 在 数据 库 中 添加 新 信息 或 编辑 信息 。 若 要 创建 动态 页 ,必须 先 设 
置 Web 服务 器 和 应 用 程序 服务 器 ,创建 或 修改 Dreamweaver 站 点 ,然后 连接 到 数据 库 。 


5. 创建 动态 页 


在 Dreamweaver 中 ,可 以 定义 动态 内 容 的 多 种 来 源 , 其 中 包括 从 数据 库 提取 的 记录 集 、 
表单 参数 和 JavaBeans 组 件 。 若 要 在 页 面 上 添加 动态 内 容 , 只 需 将 该 内 容 拖 动 到 页 面 上 
即 可 。 


6. 测试 和 发 布 


测试 页 面 是 在 整个 开发 周期 中 进行 的 一 个 持续 的 过 程 。 在 这 一 工作 流程 的 最 后 ,在 服 
务 器 上 发 布 该 站 点 。 许 多 开发 人 员 还 会 安排 定期 的 维护 ,以 确保 站 点 保持 最 新 并 且 工 作 


正常 。 


6.1.2 认识 Dreamweaver CS5 的 工作 界面 


启动 Dreamweaver CS5 将 看 到 欢迎 屏幕 ,如 图 6. 2 所 示 。 

在 “新 建 " 栏 中 选择 一 个 选项 (如 选择 HTML 选项 ) 后 即 可 进入 工作 界面 ,同时 创建 一 
个 名 字 为 Untitled-1 的 文件 ,如 图 6. 3 所 示 。 

Dreamweaver CS5 的 工作 界面 可 以 定制 ,图 6. 3 工作 界面 比较 简洁 ,对 于 一 些 常用 的 功 
能 可 以 添加 到 工作 界面 ,以 方便 使 用 。 例 如 ,打开 “窗口 "菜单 , 勾 选 “ 插 入 ” 即 可 在 工作 界面 
上 添加 “插入 ”工具 栏 , 同 样 的 方法 可 以 在 工作 区 放置 其 他 功能 组 件 。 图 6. 4 就 是 一 个 放置 
了 常用 功能 组 件 的 工作 界面 。 

图 6.4 中 的 常用 的 元 素 功能 如 下 。 


1. 插入 栏 


“插入 ” 栏 可 方便 用 户 在 制作 网 页 时 快速 插入 需要 的 网 页 元 素 。 在 Dreamweaver CS5 
中 提供 了 “常用 ”“ 布 局 ”“ 表 单 ”“ 数 据 ”、Spry、InContext Editing、“ 文 本 ”及 “收藏 夹 ” 等 8 
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图 6.2 Dreamweaver CS5 欢迎 画面 
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图 6.3 Dreamweaver CS5 的 工作 界面 
插入 栏 
Dy m- ¢| «s | Fa Ose SOES 


TAF 
文档 工具 术 面板 组 


标签 选择 器 


属性 面板 
6.4 添加 了 常用 窗口 的 Dreamweaver CS5 的 工作 界面 
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个 类 别 。 选 择 相 应 的 选项 卡 , 即 可 在 各 个 类 别 之 间 进 行 切换 。 

“插入 ” 栏 有 菜单 和 制 表 符 (Tab 页 ) 方 式 两 种 显示 方式 。 默 认 情 况 下 显示 的 是 以 Tab 
页 方式 显示 的 插入 栏 。 可 以 在 制 表 符 下 在 任意 类 别 上 右 击 选择 “显示 为 菜单 ”切换 到 菜单 形 
式 。 在 菜单 形式 下 , 单 击 * 常 用 ?按钮 旁 的 有 按钮 ,在 弹出 的 快捷 菜单 中 选择 “显示 为 制 表 符 ” 
命令 ,可 以 以 Tab 页 方式 显示 。 


2. 文档 工具 栏 


文档 工具 栏 主要 用 于 切换 编辑 区 视图 模式 .设置 网 页 标题 .进行 标签 验证 以 及 在 浏览 器 
中 浏览 网 页 等 。 

。， 单 击 ( 懂 码 按钮 可 切换 到 代码 视图 ,其 中 显示 了 网 页 的 源 代码 ,适用 于 手动 添加 代 
码 的 情况 。 

。 Mitr | ares 按钮 则 会 在 "文档 ?左边 显示 代码 视图 ,在 右边 显示 设计 视图 窗口 ,适用 
于 既 要 看 设置 后 的 效果 ,又 方便 手动 修改 或 添加 代码 的 情况 。 

。 单 击 设计 按钮 则 可 以 切换 到 设计 视图 ,在 其 中 可 以 以 可 视 化 的 方式 进行 网 页 的 编 
辑 , 是 最 常用 的 视 方 式 。 

，* 单 击 下 实时 贱 码 中 按钮 可 以 在 "文档 ”窗口 中 显示 当前 打开 的 页 面 的 代码 。 

，* 单 击 上 实时 视图 中 按钮 可 以 在 "文档 ”窗口 中 显示 当前 打开 的 页 面 的 预览 。 

。 单 击 | 检查 按钮 可 以 打开 实时 视图 和 检查 模式 。 

。， 单 击 欧 可 以 选择 打开 网 页 的 浏览 器 。 


3. 面板 组 


面板 组 一 般 置 于 编辑 窗口 右 侧 , 是 站 点 管理 ,事件 添加 等 操作 的 场所 。 将 鼠标 光标 移动 
到 浮动 面板 的 图 标 上 , 拖 动 该 面板 即 可 将 浮动 面板 移动 到 窗口 中 的 任何 位 置 。 

浮动 面板 组 中 的 许多 面板 项 目 是 非常 有 用 的 ,可 以 通过 选择 "窗口 ?菜单 中 的 相应 菜单 
命令 ,显示 或 关闭 相应 的 面板 。 要 显示 "文件 ?面板 ,可 通过 选择 “窗口 ”一 "文件 ”命令 来 实 
现 。 若 想 关闭 某 面 板 组 ,当面 板 展开 时 单 击 该 面板 组 右上 角 的 按钮 ,在 弹出 的 菜单 中 选择 
“关闭 标签 组 ”命令 即 可 。 


4. 属性 面板 


“属性 ”面板 通常 用 于 设置 和 查看 所 选 对 象 的 各 种 属性 , 它 位 于 Dreamweaver CS5 窗口 
底部 。 单 击 其 右上 角 的 按钮 可 以 关闭 “属性 ”面板 ,也 可 以 在 “窗口 "菜单 中 选择 显示 “属性 ” 
面板 。 不 同 对 象 其 "属性 ?面板 的 参数 设置 项 目 也 不 同 。 如 图 6. 5 所 示 为 “单元 格 ”" 属 性 面 
板 , 如 图 6. 6 所 示 为 图像” 属性 面板 。 


属性 


[<>imuL| | 格式 四 | 无 ~ 类 | 无 v BI ESssReol | 
ss mwa) [无 ~| OU SO BRO 

sd 单元 格 KFORU ~y EW FRIOO FREON CoE 
= oğ ogu vaw 标题 四 ) 


图 6.5 “单元 格 " 属 性 面板 
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图 6.6 “图 像 ” 属 性 面板 
5. 状态 栏 


状态 栏 用 于 显示 标签 ,缩放 文档 大 小 、 显 示 当 前 对 象 的 大 小 等 信息 。 其 中 包括 标签 选择 
器 .选取 工具 , 手 形 工具 、 缩 放 工具 ,设置 缩放 比率 下 拉 列 表 框 、 窗 口 大 小 栏 和 文件 大 小 栏 等 
项 目 ,如 图 6.7 所 示 。 


body) (Cima) NS]  v]553 x 406 29 K / 1% Unicode (UTF-8) 


图 6.7 状态 栏 


标签 选择 器 : 在 标签 选择 器 中 显示 了 一 些 常用 的 HTML 标签 ,使 用 这 些 标签 可 以 很 方 
便 地 选择 编辑 区 域 中 的 某 些 项 目 , 从 而 提高 工作 效率 。 例 如 要 选择 表格 中 的 某 一 行 ,可 以 将 
光标 定位 到 该 行 中 的 任意 一 个 单元 格 中 ,然后 单 击 标签 选择 器 中 的 让 标签 ,如 图 6. 8 
所 示 。 


C rT | 


图 6.8 选择 标签 


。 ARTHA]: 单 击 该 工具 ,鼠标 光标 将 变 成 箭头 形状 ,此 时 可 选择 设计 视图 中 的 各 
种 对 象 。 

© FBT SD. 单 击 该 工具 ,鼠标 光标 将 变 成 手 形 形 状 ,此 时 按 住 鼠标 左 键 不 放 并 拖 
动 鼠标 ,可 移动 设计 视图 中 整个 网 页 的 位 置 ,从 而 方便 查看 原来 未 显示 出 的 部 分 
内 容 。 

， AUTRA : 单 击 该 工具 ,鼠标 光标 将 变 成 放大 镜 形状 ,此 时 在 设计 视图 中 单 击 鼠 
标 左 键 可 以 放大 显示 设计 视图 中 的 内 容 ; 按 住 Alt 键 不 放 , 鼠 标 指针 将 变 为 缩小 镜 
形状 ,此 时 在 设计 视图 中 单 击 鼠标 左 键 可 以 缩小 显示 设计 视图 中 的 内 容 ; 按 住 鼠 标 
左 键 不 放 并 拖 动 ,在 设计 视图 中 脱出 一 个 矩形 框 ,释放 鼠标 ,此 时 被 矩形 框框 住 的 部 
分 将 以 最 大 化 的 方式 进行 显示 。 

。 设置 缩放 比率 下 拉 列 表 框 : 用 于 设置 设计 视图 的 缩放 比率 ,可 直接 输入 需要 的 缩放 
比率 或 单 击 右 侧 的 二 = 按钮 ,在 弹出 下 拉 列 表 中 选择 一 个 缩放 比率 选项 。 

。 窗口 大 小 栏 : 用 于 显示 当前 设置 视图 的 尺寸 大 小 。 

。 文件 大 小 栏 : 用 于 显示 当前 网 页 文件 的 大 小 以 及 下 载 时 需要 的 时 间 。 
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6.1.3 网 页 文档 的 基本 操作 
网 页 文档 的 基本 操作 包括 创建 网 页 预览 网 页 .保存 网 页 .打开 网 页 和 关闭 网 页 等 ,下 面 


分 别 进行 介绍 。 

1. 创建 网 页 

在 Dreamweaver CS5 中 可 创建 不 同类 型 的 空白 网 页 文档 ,创建 空白 网 页 文档 的 操作 步 
又 如 下 : 


(1) 启动 Dreamweaver CS5 ,选择 “文件 或 新 建 "命令 。 

(2) 在 打开 的 “新 建文 档 ” 对 话 框 中 选择 “空白 页 "选项 卡 , 在 “页 面 类 型 "列表 框 中 选择 
HTML 选项 ,在 “布局 ”列表 框 中 选择 “无 ”选项 ,如 图 6.9 所 示 。 

(3) 完成 空白 网 页 文档 的 创建 。 


Nash 


m 模板 
XSLT CE) 
XSLT ¢ Sith) 


zenn INL 1.0 Transitional M 


= 
= 


附加 css 文件 - 


miz i piii atalyst IpCentext 
ELEN 


图 6.9 “新 建文 档 ” 对 话 框 


2. 预览 网 页 


对 网 页 进行 编辑 后 ,可 以 在 预览 器 中 对 网 页 效果 进行 预览 。 选 择 “ 文 件 /在 预览 器 中 预 
W IExplorer” 命 令 或 单 击 “ 文 档 "工具 栏 中 的 “在 浏览 器 中 预览 调试 "按钮 区 .| ,在 弹出 的 快 
捷 菜 单 中 选择 “预览 在 IExplorer” 命 令 即 可 执行 预览 网 页 的 操作 。 


3. 保存 网 页 
完成 网 页 文档 的 编辑 后 ,还 需要 对 网 页 文档 进行 保存 。 
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4. 打开 网 页 
要 对 已 有 的 网 页 进行 修改 ,需要 在 Dreamweaver 中 打开 网 页 ,打开 网 页 的 主要 方法 有 
如 下 四 种 : 


(1) 通过 对 话 框 打开 : 选择 “文件 ”一 “打开 ”命令 ,在 打开 的 “打开 ”对 话 框 的 “查找 范 
围 ? 下 拉 列 表 框 中 选择 网 页 所 在 的 位 置 , 在 文件 列表 框 中 双击 需要 打开 的 网 页 。 

(2) 通过 菜单 命令 打开 : 选择 "文件 ”打开 最 近 的 文件 ”命令 ,在 弹出 的 子 菜单 中 选 
择 一 个 最 近 打 开 过 的 网 页 文件 。 

(3) 通过 双击 方式 打开 : 对 于 后 级 名 为 . asp、. aspx、. php、. jsp 等 格式 的 网 页 文件 ,直接 
找到 并 双击 该 文件 也 可 打开 该 网 页 。 

(A) 通过 快捷 菜单 打开 : 对 于 所 有 Dreamweaver CS5 支持 的 网 页 文件 ,可 以 在 该 网 页 
文件 上 单 击 鼠 标 右键 ,在 弹出 的 快捷 菜单 中 选择 "使 用 Adobe Dreamweaver CS5 "命令 。 


6.1.4 设置 页 面 属性 


新 建 网 页 文档 后 ,通常 需要 对 网 页 文档 的 属性 进行 设置 ,主要 包括 网 页 的 外 观 、 超 级 连 
接 样 式 和 网 页 标题 等 。 

要 设置 网 页 属性 ,可 先 打 开 网 页 文档 ,然后 选择 “修改 >“ 页面 属 性 ”命令 ,在 打开 的 “页 
面 属性 ”对 话 框 左 侧 的 "分 类 ”列表 框 中 选择 类 别 , 在 右 侧面 板 上 进行 各 属性 的 详细 设置 。 


1. 设置 外 观 属性 


打开 “页 面 属性 ”对 话 框 后 ,默认 为 外 观 类 别 , 在 其 右 侧 可 进行 页 面 外 观 属性 的 详细 设 
置 。 包 括 网 页 文档 中 文本 字体 .文本 大 小 .文本 颜色 .网 页 文档 背景 图 像 等 的 设置 。 设 置 网 
页 外 观 属性 的 操作 步骤 如 下 : 

(1) 新 建 一 个 空白 的 网 页 文档 ,选择 “修改 ”一 “页 面 属 性 ”命令 ,打开 “页 面 属性 ”对 话 
框 。 在 “页 面 字 体 ” 下 拉 列 表 框 中 选择 “新 宋体 ”选项 ,在 "大 小 "下拉 列 表 框 中 选择 "12” 选 项 。 


(3) 在 “背景 图 像 "文本 框 中 输入 背景 图 像 的 位 置 名 称 ,在 "重复 "下 拉 列 表 框 中 选择 "不 
(4) 在 “左边 距 ”“ 右 边 距 ”"“ 上 边 距 ”和 “下 边 距 ”文本 框 中 都 输入 “0”, 激 活 其 后 的 单位 
下 拉 列 表 框 ,保持 默认 设置 , 单 击 “ 确 定 ” 按 钮 完成 页 面 外 观 属性 的 设置 。 


2. 设置 链接 属性 


设置 链接 属性 是 指 设置 网 页 文档 中 超 链 接 状 态 的 格式 ,如 超 链 接 文 本 初始 显示 的 颜色 、 
当 和 鼠标 指向 它 时 指定 显示 的 颜色 及 单 击 它 后 显示 的 颜色 等 。 设置 网 页 文档 超 链接 属性 的 操 
作 步 骤 如 下 : 

(1) 在 打开 的 “网 页 属性 ?对 话 框 的 左 侧 * 分 类 ”列表 框 中 选择 “链接 ?选项 ,在 “链接 ”下 
拉 列 表 框 右 侧 单 击 “ 加 粗 ? 按 钮 将 链接 文本 设 为 加 粗 显 示 ,设置 字号 为 9, 在 其 后 的 下 拉 列 表 
选 框 中 选择 "点 数 pt” 选项 ,如 图 6. 10(a) 所 示 。 

(2) 在 “连接 颜色 ”文本 框 中 输入 链接 文本 初始 显示 颜色 ,如 蓝 色 (#0033CC); 在 “变换 
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BERBEI” SOAR HE Hi A H BORTE EE F ERE E T bas FY BL E «. WR W f (H OOCCFF), 
如 图 6. 10(b) 所 示 。 


链接 (Css) 
RFE OD: | ( 同 页 面 字体 ) 
AAS: [9 vie 
emeu: 区 | Remi ®: M 
已 访问 链接 号: m] 活动 链接 w): 站 | | 
TURR V: [ERA TFR 


分 类 链接 (Css) 

EEA REED: | 同 页 面 字体 

gence Kat): [e | 

anes BRED: IR [poo | AMER WD: E 
已 访问 链接 ww: m] ameno: 加 
和 样式 由: Pe 


(b) 设置 链接 文本 的 颜色 
图 6.10 设置 链接 文本 字体 与 颜色 


G) 在 "已 访问 链接 "文本 框 中 输入 当 鼠 标 单 击 链接 文本 后 显示 的 颜色 ,如 紫色 (并 993399)， 
在 “活动 链接 "文本 框 中 输入 当 鼠 标 在 链接 文本 上 单 击 时 显示 的 颜色 ,如 橘 黄色 (# FF6600)， 
如 图 6. 11 所 示 。 

(4) 在 “下 划 线 样式 "下 拉 列 表 框 中 选择 * 仅 在 变换 图 像 时 显示 下 划 线 ?选项 ,如 图 6. 12 
所 示 o 


3. 设置 标题 属性 


在 “页 面 属性 ”对 话 框 的 “分 类 ”列表 框 中 选择 “标题 "选项 后 ,在 其 右 侧面 板 中 可 设置 网 
页 中 标题 的 字体 .大 小 和 颜色 等 参数 ,如 图 6. 13 所 示 。 其 设置 方法 和 设置 外 观 的 样式 基本 
相同 。 若 选择 “标题 /编码 ”选项 ,对 话 框 右 侧面 板 中 将 显示 “标题 /编码 ”的 参数 设置 项 ,如 
图 6.14 所 示 。 在 “标题 "文本 框 输入 网 页 标题 ,该 标题 将 出 现在 浏览 器 标题 栏 中 ; 在 “文档 
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链接 (Css) 
链接 字体 区) 


AS 
HEHE L) 
已 访问 链接 四 
TURRE Ww 


图 6.11 设置 已 访问 链接 文本 的 颜色 


链接 字体 OQ): | ( 同 页 面 字体 ) 
KA): |9 [px { 
链接 颜色 L): WM |#0033CC | 支 换 图 像 链接 R): 天 | 
已 访问 链接 V 活动 链接 A): IR 
FURRER W 


fr) 


图 6.12 设置 链接 文本 的 下 划 线 样式 


标题 (css) 
标题 字体 到 ) 
标题 1 4: [i 
标题 2(2): | 
标题 3G): [ 
标题 4(4): | 


标题 5G): | 
标题 6@) 


onang 


图 6.13 设置 网 页 中 的 标题 样式 
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类 型 "下 拉 列 表 框 中 可 以 选择 编辑 的 文档 类 型 ,通常 选择 XHTML 1. 0 Transitional 或 


XHTML 1.0 Strict, 可 以 使 HTML 文档 与 XHTML 兼容 ; 在 “编码 ”下 拉 列 表 框 中 设置 页 
面 使 用 的 字体 编码 类 型 。 


BS) 


XHTML 1.0 Transitional = ¥ 


[黄体 中 文 (618030) | EKRAN 


SESH: 了 :MySite\ 


图 6.14 0 设置 网 页 在 浏览 器 中 的 标题 /编码 


6.1.5 规划 与 创建 站 点 


站 点 是 管理 网 页 文档 的 场所 ,利用 站 点 的 管理 功能 可 对 站 点 中 的 文件 进行 管理 和 测试 。 
在 创建 站 点 之 前 还 需 先 规划 站 点 ,以 达到 最 佳 效 果 。 


1. 认识 站 点 


通过 各 种 链接 联系 起 来 的 多 个 网 页 文档 就 构成 了 站 点 。Dreamweaver CS5 中 提供 了 

本 地 站 点 : 是 用 户 工作 的 目录 ,用 于 存放 用 户 网 页 、 素 材 等 本 地 文件 夹 , 在 制作 一 般 网 
页 时 只 需 建立 本 地 站 点 即 可 。 

远程 站 点 : 为 了 在 不 链接 Internet 的 情况 下 而 能 对 所 建 的 站 点 进行 测试 .修改 ,需要 在 
本 地 电脑 上 创建 远程 站 点 ,以 模拟 真实 的 Web 服务 器 环境 进行 测试 。 

测试 站 点 : 主要 用 于 对 动态 页 面 进行 测试 ,如 在 制作 ASP、PHP 或 JSP 等 动态 网 页 时 
必须 创建 测试 站 点 ,否则 浏览 网 页 时 它 将 不 能 正确 显示 。 


2. 规划 站 点 


规划 站 点 是 指 利用 不 同 的 文件 夹 将 不 同 的 网 页 内 容 分 门 别 类 地 保存 ,合理 地 组 织 站 点 
结构 ,可 提高 工作 效率 ,加 快 对 站 点 的 设计 。 站 点 规划 的 目的 在 于 明确 建站 的 方向 和 确定 实 
现 这 一 目标 所 采用 的 方式 ,同时 也 是 确定 本 站 点 所 需要 实现 的 功能 。 

规划 站 点 时 要 明确 网 站 的 主题 ,哪些 信息 是 必需 的 ,哪些 信息 是 希望 有 的 ,哪些 信息 是 
可 以 没有 的 ,通过 这 些 分 析 即 可 得 出 网 站 的 栏目 及 其 包含 的 内 容 。 在 规划 站 点 结构 时 ,最 常 
采用 的 是 树 形 模式 的 规划 法 。 首 先 分 频道 ,频道 内 容 再 次 划分 栏目 ,栏目 内 又 划分 出 几 个 不 
同 的 子 栏目 ,依次 类 推 ,形成 树 根 式 的 模式 图 。 
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3. 创建 并 管理 站 点 


站 点 规划 完成 后 , 即 可 开始 创建 站 点 。 在 Dreamweaver CS5 中 可 以 通过 “站 点 管理 ”对 
话 框 进行 站 点 的 创建 和 管理 操作 。 

(1) 创建 站 点 

在 一 个 网 站 中 包含 多 个 网 页 ,为 了 更 好 地 对 这 些 网 页 进行 管理 和 维护 ,在 制作 网 页 之 
前 ,最 好 先 在 Dreamweaver CS5 中 创建 站 点 。 

选择 “站 点 /新 建站 点 "命令 ,打开 站 点 定义 的 对 话 框 ,在 “站 点 名 称 ” 文 本 框 中 输入 站 点 
名 称 ,这 里 输入 *MySite”, 如 图 6.15 所 示 , 单 击 “ 下 一 步 " 按 钮 ,创建 一 个 站 点 ,如 图 6. 16 所 
示 , 新 建 的 站 点 中 没有 文件 ,是 空 站 点 。 


站 点 设置 对 象 MySite 
站 点 


ty Me ee ee teal ee 
Re Hasan peta eeee Wo Toh om Loe 


你 可 以 在 此 处 为 Dreamweaver MARS MOLARS H. 
站 点 名 称 : [Myte 
EMARE: [F Myte 


图 6.15 新 建站 点 对 话 框 


(2) 管理 站 点 

创建 站 点 完成 后 ,还 可 以 对 站 点 进行 管理 。 如 添加 测试 服务 器 、 改 变 站 点 的 名 称 、 创 建 
文件 或 文件 夹 .删除 不 需要 的 文件 或 文件 夹 等 。 管 理 站 点 的 操作 如 下 : 

D 选择 “窗口 /文件 ”命令 ,打开 “文件 ”面板 ,在 站 点 根 目录 上 单 击 鼠 标 右键 ,在 弹出 的 
快捷 菜单 中 选择 “新 建文 件 夹 " 命 令 , 如 图 6.17 所 示 。 


文件 
[Bysite Es x] 
aoClSe¢748| 


图 6.16 站 点 视图 图 6.17 选择 “新 建文 件 夹 ”命令 
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© Dreamweaver 将 自动 在 站 点 根 目录 下 创建 一 个 名 为 untitled 的 新 文件 夹 且 文件 夹 
名 称 处 于 可 改写 状态 ,修改 文件 夹 的 名 称 为 相应 栏目 的 名 称 , 如 about, 然 后 单 击 Enter 键 确 
认 , 如 图 6.18 所 示 。 

© 用 相同 的 方法 新 建 其 他 栏目 的 文件 夹 . 子 文件 夹 和 图 像 文 件 夹 。 

@ 选择 某 一 文件 夹 , 在 其 上 单 击 鼠 标 右键 ,在 弹出 的 快捷 菜单 中 选择 “编辑 /删除 ” 命 
令 , 在 打开 的 确认 删除 对 话 框 中 单 击 " 是 ”按钮 ,将 该 文件 夹 从 站 点 中 删除 。 

O 选择 “站 点 /管理 站 点 ”命令 ,打开 “管理 站 点 "对话 框 ,在 站 点 列表 中 选择 MySite 站 
点 ,如 图 6. 19 所 示 。 


| 


&oloe Ya ela 
FE 


图 6.18 重 命名 文件 夹 图 6.19 “管理 站 点 "对话 杠 


@ 单 击 "编辑 ”按钮 ,打开 如 图 6. 15 所 示 对 话 框 中 即 可 对 该 站 点 进行 编辑 ,包括 本 地 信 
息 、 远 程 信息 ,测试 服务 器 以 及 站 点 地 图 布局 等 ,其 操作 过 程 和 前 面 创建 站 点 的 操作 一 样 。 

@ 编辑 完成 后 , 单 击 “ 保 存 ” 按 钮 关闭 对 话 框 ,返回 “管理 站 点 "对话 框 , 单 击 “ 市 除 ” 按 
钮 ,在 打开 的 警告 对 话 框 中 单 击 “ 是 ”按钮 确认 删除 , 青 单 击 “ 管 理 站 点 "对 话 框 中 的 “完成 ” 按 
钮 ,删除 MySite 的 站 点 ,“ 文 件 ” 面 板 中 将 不 再 显示 该 站 点 。 


6.2 制作 简单 网 页 


6.2.1 向 网 页 中 添加 文本 


文本 是 网 页 中 运用 最 广泛 的 元 素 之 一 , 它 是 向 浏览 者 传递 有 效 信息 最 主要 的 方式 。 文 
本 是 网 页 中 不 可 或 缺 的 元 素 , 其 信息 传递 的 方式 是 其 他 任何 一 种 网 页 元 素 都 无 法 代替 的 。 
下 面 将 详细 讲解 在 网 页 中 添加 不 同类 型 文本 的 方法 。 


1. 添加 普通 文本 


在 Dreamweaver CS5 中 通过 “文本 ”插入 栏 可 快速 添加 各 类 型 的 文本 。 当 “插入 ” 栏 以 
菜单 的 方式 显示 时 , 单 击 “ 插 入 " 栏 的 按钮 ,在 弹出 的 菜单 中 选择 “文本 ”命令 即 可 切换 到 “ 文 
本 ”插入 栏 ,如 图 6. 20 所 示 , 鼠 标 移 到 相应 的 按钮 上 ,会 显示 出 按钮 的 名 称 。 

在 网 页 中 添加 文本 与 在 Word 等 文字 处 理 软 件 中 添加 文本 一 样 方 便 ,可 以 直接 输入 文 
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图 6.20 “文本 ”插入 栏 


本 ,也 可 从 其 他 文档 中 复制 文本 ,还 可 以 导入 其 他 文档 中 的 文本 。 

方法 一 : 直接 输入 文本 

直接 输入 文本 的 方法 很 简单 ,只 需 将 插入 点 定位 在 网 页 “文档 ”窗口 中 ,切换 到 所 需 的 输 
人 法 ,然后 直接 输入 所 需 的 文本 即 可 。 

方法 二 : 从 其 他 文档 中 复制 文本 

从 其 他 文档 中 复制 文本 可 以 节省 时 间 , 从 而 提高 制作 网 页 的 速度 ,在 其 他 文档 中 (如 记 
事 本 、Word 文档 等 ) 选 择 需 复制 的 文本 。 按 Ctrl 十 C 键 或 单 击 鼠 标 右键 ,在 弹出 的 快捷 菜单 
中 选择 “复制 "命令 将 其 复制 到 剪 切 板 中 ,将 插入 点 定位 到 网 页 中 需 输入 文本 的 位 置 , 按 
Ctrl 十 V 键 或 单 击 鼠 标 右键 ,在 弹出 的 快捷 菜单 中 选择 “粘贴 ”命令 即 可 将 剪 切 板 中 的 文本 


粘贴 到 当前 编辑 窗口 中 。 

方法 三 : 导入 文本 

使 用 Dreamweaver CS5 可 以 导入 XML 模板 .表格 数据 Word 及 Excel 等 文档 中 的 
文本 。 


例 6.1 从 Word 文档 导入 文本 。 

(1) 新 建 一 个 空白 网 页 文档 ,将 插入 点 定位 到 “编辑 ”窗口 中 。 

(2) 选择 "文件 ”一 "导入 ”一 ”Word 文档 ”命令 ,在 打开 的 “导入 Word 文档 ”对 话 框 中 选 
择 文档 ,如 图 6. 21 所 示 。 


SRAD: |S Examples. 1 


ft Word Document (+. doc:*. docx M 


文本 、 结 构 、 基 本 格式 ( 粗 体 、 斜 体 ? { 


清理 Word BEC) 


图 6.21 “导入 Word 文档 ”对话 框 


(3) 单 击 “ 打 开 ” 按 钮 , 即 可 将 文本 内 容 导 入 到 Dreamweaver CS5 中 。 
(4) 保存 文档 命名 为 Example6-1. html, 如 图 6. 22 所 示 。 
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图 6.22 导入 文本 


2. 添加 特殊 字符 


网 页 制作 过 程 中 ,时 常 需要 添加 一 些 特殊 字符 ,如 版 本 符号 
@ .注册 商标 符号 @@ 等 。 下 面 用 不 同 的 方法 在 网 页 中 添加 特殊 符 
号 ,其 操作 步骤 如 下 : 

(1) 将 插入 点 定位 到 “编辑 ”窗口 中 ,将 插入 栏 切换 到 “文本 ” 
插入 栏 。 

(2) 单 击 “ 文 本 "插入 栏 中 国 : 按 钮 .在 弹出 的 如 图 6. 23 所 示 
的 菜单 中 选择 所 需 的 命令 即 可 添加 常用 的 特殊 符号 。 图 6.23 选择 特殊 符号 

(3) 若 需 添加 更 多 的 特殊 字符 ,可 在 弹出 的 菜单 中 选择 “其 
他 字符 ”命令 。 

(4) 在 打开 的 “插入 其 他 字符 ”对 话 框 中 选择 需要 的 字符 ,如 图 6. 24 所 示 。 完 成 后 单 击 
“确定 ”按钮 即 可 添加 所 需 的 字符 。 


[eae cre + Enter) 


新 入 其 他 字符 


"| ss 


p 


si org» 
lem alms |e 


alale|a|o|a| el >| i 


图 6. 24 “插入 其 他 字符 ”对 话 框 
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在 Dreamweaver CS5 中 输入 空格 时 会 发 现 无 论 按 多 少 次 空格 键 都 只 会 出 现 一 个 空格 ， 
这 是 因为 Dreamweaver CS5 的 文档 格式 都 是 以 HTML 形式 存在 ,而 HTML 文档 中 只 允许 
字符 之 间 包 含 一 个 空格 。 要 在 网 页 文档 中 添加 连续 的 空格 ,可 以 采用 以 下 几 种 方式 : 
。 在 “文本 ”插入 栏 中 单 击 “ 已 编排 格式 ”按钮 PRE, 再 连续 按 空格 键 。 
。 选择 “插入 ”HTMIL>“ 特 殊 字符 ”>“ 不 换行 空格 "命令 可 以 添加 一 个 空格 ,如 果 需 
要 添加 多 个 空格 可 重复 操作 。 

© HE Shift 十 Ctrl 十 空格 键 添加 一 个 空格 ,如 果 需 要 添加 多 个 空格 可 重复 操作 。 

。 将 输入 法 切换 到 全 角 状 态 ( 通 常 按 Shift 十 空格 键 可 以 进行 全 ,半角 状态 切换 ) ,直接 
按 空格 键 ,需要 多 少 个 空格 就 按 多 少 次 空格 键 。 


4. 添加 水 平 线 


当 网 页 中 的 对 象 较 多 时 ,页 面 可 能 会 显得 有 些 杂 乱 ,这 时 可 以 使 用 水 平 线 将 多 个 对 象 进 
行 分 割 , 使 段落 区 分 更 显明 ,让 网 页 更 具 层 次 感 。 其 操作 步骤 如 下 : 

(1) 将 光标 定位 到 添加 水 平 线 后 面 。 

(2) 选择 * 插 和 人 "HTML 一 "水平线 "命令 添加 水 平 线 。 

(3) 选择 该 水 平 线 ,在 "属性 "面板 中 取消 选中 的 "阴影" 复 选 框 ,在 “高 "文本 框 中 输入 
“3”, 在 “ 宽 ” 文 本 框 里 输入 *100”, 在 其 后 的 下 拉 列 表 框 中 选择 “%” 选 项 ,在 对齐 ”下 拉 列 表 
框 中 选择 “居中 对 齐 ” 选 项 ,如 图 6. 25 所 示 。 
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图 6.25 水 平 线 属性 面板 


(4) 单 击 “ 属 性 ”面板 右 侧 的 快捷 标签 编辑 器 按钮 加 ,在 “编辑 标签 "文本 框 中 的 
“/>" 文 本 前 输入 代码 "color 一 /并 FF0000”, 如 图 6. 26 所 示 。 


手动 输入 代码 si 
= 


HF | 居中 对 齐 WH 类 | 无 fy 
阴影 


图 6.26 设置 水 平 线 的 属性 
(5) 输入 完成 后 单 击 Enter 键 确 认输 入 ,保存 页 面 ,然后 可 按 F12 键 浏览 页 面 。 
5. 添加 日 期 


Dreamweaver CS5 提供 了 一 个 方便 的 日 期 对 象 , 该 对 象 可 以 以 任何 格式 插入 当前 日 期 
(包含 或 不 包含 时 间 ) ,并 可 在 每 次 保存 文件 时 都 自动 更 新 日 期 。 
在 Dreamweaver CS5 中 添加 当前 日 期 的 操作 步骤 如 下 : 
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(1) 将 插入 点 定位 到 需要 添加 日 期 或 时 间 的 位 置 , 选 择 " 插 入 ”日 期 ”命令 。 
(2) 在 打开 的 “插入 日 期 ”对话 框 中 设置 星期 ,日 期 和 时 间 格 式 等 , 若 选 中 “储存 时 自动 
更 新 " 复 选 框 可 在 每 次 保存 文档 时 都 更 新 添加 的 日 期 。 如 果 和 希望 日 期 在 插入 后 变 成 纯 文本 
并 永远 不 自动 更 新 ,请 取消 选择 该 选项 ,如 图 6. 27 所 示 。 
G) 单 击 “ 确 定 ” 按 钮 完成 日 期 的 添加 。 


星期 格式 : | [不 要 星期 ] 


日 期 格式 : wa 
1974 手 3 月 7 


03/07/1974 
3/T/T4 


时 间 格式 : | [不 要 时 间 ] 
请 存 时 自动 更 新 


图 6.27 网 页 中 添加 的 日 期 和 时 间 


6. 设置 文本 格式 


合理 设置 网 页 文本 的 属性 ,可 以 使 网 页 更 美观 .层次 更 分 明 。 在 “属性 ?面板 中 可 对 文本 
的 颜色 ,字体 和 大 小 等 进行 设置 ,选择 文本 后 的 “属性 ”面板 如 图 6. 28 所 示 。 
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图 6.28 文本 “属性 ”面板 


7. 设置 段落 格式 


设置 网 页 文本 的 段落 格式 包括 设置 段落 缩 进 和 对 齐 方式 。 选 择 要 设置 段落 格式 的 文 
本 ,或 将 插入 点 定位 到 该 段落 中 ,在 “属性 ”面板 中 即 可 设置 其 段落 格式 。 


6.2.2 向 网 页 中 添加 图 像 


网 页 中 的 文本 向 人 们 传递 了 最 翔实 的 信息 ,而 网 页 中 的 图 像 却 能 起 到 画龙点睛 的 作用 。 
恰到好处 地 在 网 页 中 应 用 图 像 ,能 使 制作 出 的 网 页 更 加 生动 美观。 下面 将 介绍 如 何在 网 页 
中 插入 图 像 .编辑 图 像 以 及 制作 鼠标 经 过 图 像 和 导航 条 等 。 


1. 插入 图 像 


网 页 中 的 图 像 一 般 有 两 种 存在 方式 ,一 是 作为 网 页 的 内 容 存在 ,二 是 作为 网 页 或 其 他 对 
象 的 背景 存在 。 下 面 在 Dreamweaver CS5 中 使 用 直接 插入 的 方式 为 网 页 文档 插入 一 幅 图 
像 作为 网 页 内 容 ,其 操作 步骤 如 下 : 
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(1) 新 建 空白 文档 ,将 插入 点 定位 到 需要 插入 图 像 的 位 置 。 

(2) 选择 "插入" 一“ 图像” 命令 或 将 插入 栏 切换 到 “常用 ”插入 栏 , 单 击 “ 图 像 按 钮 | 相 | ， 
打开 “选择 图 像 源 文件 ”对 话 框 。 

G) 在 “查找 范围 "下 拉 列 表 框 中 选择 要 插入 的 图 像 的 位 置 ,然后 在 中 间 列 表 框 中 选择 
需 插入 到 网 页 中 的 图 像 文 件 ,“ 文 件 名 ”文本 框 中 自动 出 现 所 选 文件 的 名 称 , 如 图 6. 29 所 示 。 


RARE UH 
Tae 
ORE 和 


查找 范围 加 :| 加 Exanp1e6.2 oem 
am 


lad second 


文件 各 Ww: first 2 | 293 x 220 JPEG, 181 K / 
文件 类 型 If) :| 图 入 文件 (e.gifik_ jpe:*. jpegit pne:* 加 | 


URL file: ///F |/MySi te/Example8. 2/first. jpe 
相对 于 文档 ~| Untitled-1 


在 站 点 定义 中 更 改 默认 的 链接 相对 于 
要 使 用 此 选项 ， 请 保存 文件 。 


图 6.29 选择 图 像 


(4) 单 击 “ 确 定 "按钮 ,在 打开 的 "图像 标签 辅助 功能 属性 对话 框 的 “替换 文本 ”下 拉 列 
表 框 中 ,输入 当 用 户 浏 览 网 页 时 图 像 不 能 正常 显示 或 将 鼠标 光标 移 到 图 像 上 时 显示 的 提示 
文本 ,在 “详细 说 明 " 文 本 框 中 可 指定 对 该 图 像 进行 详细 说 明 的 网 页 文档 的 路 径 及 名 称 , 如 
图 6. 30 所 示 。 


图 像 标 签 辅助 功能 属性 


ears: [Nea OV 
说 8 说明: http:// |B 


如 果 在 插入 对 象 时 不 起 输入 此 信息 ， MERAH 
PERSA i 


图 6.30 “图 像 标签 辅助 功能 属性 ”对 话 框 


(5) 单 击 “ 确 定 ” 按 钮 ,图 像 插 入 到 网 页 中 ,然后 拖 动 图 像 周 围 的 结 点 对 图 像 大 小 作 适 当 
的 调整 ,使 其 更 适合 网 页 显示 的 大 小 。 


2. 设置 图 像 属 性 


在 页 面 中 插入 图 像 后 ,有 时 还 需要 对 图 像 进行 命名 .设置 图 像 大 小 、 修 改 源 文 件 . 设 置 
像 说 明 、 对 齐 方 式 、 边 距 和 添加 边框 等 操作 ,这 时 可 以 选中 图 像 , 通 过 如 图 6. 31 所 示 的 “图 
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像 ” 属 性 面板 来 设置 。 
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图 6.31 “图 像 ” 属 性 面板 


“图 像 "属性 面板 中 主要 参数 的 含义 如 下 。 
A) “BR? XEHE: 用 于 为 图 像 进行 命名 ,以 便 使 用 脚本 时 对 其 进行 控制 或 通过 定义 
CSS 样式 来 改变 图 像 的 显示 。 

(2)“ 宽 "和 “高 "文本 框 : 用 于 设置 图 像 的 大 小 ,默认 度量 单位 为 像素 。 当 编辑 窗口 中 
的 图 像 大 小 与 原始 图 像 大 小 不 一 致 时 ,将 在 文本 框 右 侧 显示 O 图 标 , 单 击 该 图 标 将 恢复 图 
像 原 始 大 小 。 

(3)“ 源 文件 "文本 框 : 用 于 显示 文件 的 位 置 , 如 果 要 用 新 图 像 蔡 换 原始 图 像 , 在 * 源 文 
件 " 文 本 框 中 重新 输入 要 插入 图 像 的 位 置 或 单 击 其 后 器 的 按钮 ,在 打开 的 “选择 图 像 源 文 
件 ” 对 话 框 中 重新 选择 其 他 图 像 即 可 。 

(4)“ 替 换 ”" 下 拉 列 表 框 : 用 于 设置 图 像 的 简短 描述 文本 。 在 浏览 该 网 页 时 , 当 鼠 标 光 
标 移动 到 图 像 上 或 不 能 正常 显示 图 像 时 会 显示 该 文本 。 

(5)“ 垂 直 边 距 ” 和 "水 平 边 距 ” 文 本 框 : 用 于 设置 图 像 与 文本 在 垂直 方向 及 水 平方 向 的 
距离 。“ 垂 直 边 距 ” 用 于 设置 图 像 项 部 和 底部 的 边 距 ;“ 水 平 边 距 ” 用 于 设置 图 像 左 侧 和 右 侧 
的 边 距 。 

(6)“ 边 框 "文本 框 : 用 于 设置 边框 的 宽度 ,其 单位 为 像素 ,通常 设置 为 0。 

(7)“ 对 齐 ” 下 拉 列 表 框 ; 用 于 设置 同一 行 上 的 图 像 与 文本 的 对 齐 方式 。 默 认 值 是 基线 
对 齐 ,是 指 将 文本 基准 线 对 齐 图 像 底 端 。 

(8) 亮度 和 对 比 度 按钮 介 : 用 于 调整 图 片 的 明暗 度 , 单 击 介 按钮 将 打开 “亮度 /对 比 
度 ” 对 话 框 ,在 “亮度 " 栏 中 拖 动 滑 块 可 调整 图 像 的 明暗 度 ; 在 对比度” 栏 中 拖 动 滑 块 可 调整 图 
像 的 对 比 度 。 若 选中 “预览 " 复 选 框 , 则 在 调节 明暗 度 和 对 比 度 时 可 看 到 页 面 中 图 像 的 变化 。 


3. 创建 鼠标 经 过 图 像 


鼠标 经 过 图 像 由 原始 图 像 和 鼠标 经 过 图 像 组 成 。 在 浏览 器 中 查看 网 页 中 , 当 鼠 标 光标 
经 过 图 像 时 图 像 变 为 鼠标 经 过 图 像 , 移 开 鼠标 光标 后 图 像 又 还 原 到 原始 图 像 。 

例 6.2 创建 图 片 经 过 对 象 ,过 程 如 下 ， 

(1) 新 建 空 自 文档 命名 为 Example6-2. html, 将 插入 点 定位 到 要 创建 鼠标 经 过 图 像 的 
位 置 , 选 择 * 插 入 ”>“ 图 像 对 象 ">“ 忆 标 经 过 图 像 "命令 ,打开 * 插 入 鼠标 经 过 图 像 "对 话 框 ， 
如 图 6. 32 所 示 。 

(2) 在 “图 像 名 称 "文本 框 中 输入 图 像 名 称 , 单 击 "原始 图 像 " 文 本 框 后 的 “浏览 "按钮 。 

(3) 使 用 同样 的 方法 设置 鼠标 经 过 图 像 。 

(4) 选中 * 预 载 鼠 标 经 过 图 像 " 复 选 框 使 网 页 加 载 完成 后 将 鼠标 经 过 图 像 预 载 到 本 地 电 
脑 的 缓存 中 ,以 避免 图 像 显示 延迟 。 
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图 6.32 “插入 鼠标 经 过 图 像 ” 对 话 框 


(5) 在 “替换 文本 "文本 框 中 输入 对 图 像 的 描述 。 在 “ 按 下 时 ,前 往 的 URL” 文 本 框 输入 
当 单 击 鼠 标 经 过 图 像 时 跳 转 到 的 网 页 ,可 以 空 着 ,设置 完 后 如 图 6. 33 所 示 。 


插入 鼠标 经 过 图 像 


图 像 名 称 : [iia 
原始 图 像 7 .7 素材 /第 6 章 /iial。ipg 
腿 标 经 过 图 像 ， |. /-. /素材 /第 6 章 /iial。ipg 
| Hise Rae IR 
BAXE RRRa 
按 下 时 ， 前 往 的 URL: [iia。htnl 


图 6.33 完成 鼠标 经 过 图 像 的 设置 


(6) 单 击 “确定 ”按钮 ,完成 鼠标 经 过 图 像 的 创建 ,保存 网 页 并 预览 ,鼠标 不 经 过 的 图 如 
图 6. 34 所 示 ,鼠标 经 过 如 图 6. 35 所 示 。 


] (@ 无 标题 文档 - Windows Internet ... -o ||). E 
(CION [E] DAExample\Exam; ~] 4+] x ||P ] 

H SAA RSE EEV) baka IAM ” 
A 收藏 天 6 A AUER | @ cee 


图 6.34 鼠标 没 移动 到 图 片上 图 6.35 鼠标 移动 到 图 片上 


So Web 前 端 设计 一 一 HTML+CSS+jQuery 技 术 教 程 


6.3 超 链接 使 用 


在 浏览 网 页 的 过 程 中 , 当 单 击 某 些 文本 或 图 像 时 即 可 跳 转 到 其 他 网 页 中 ,这些 文本 或 图 
像 就 是 添加 了 超 链接 的 文本 或 图 像 。 超 链接 能 够 实现 页 面 与 页 面 之 间 的 跳 转 ,从 而 将 网 站 
中 的 每 个 页 面 链 接 起 来 。 

超 链接 是 由 源 端 点 和 目标 端点 两 部 分 组 成 。 其 中 有 超 链接 的 一 端 称 为 源 端 点 (响应 鼠 
标 单 击 操 作 的 图 像 或 文本 ) , 跳 转 到 的 页 面 称 为 目标 端点 (打开 的 新 页 面 )。 在 网 页 中 可 以 添 
加 文本 超 链 接 、 图 像 热 点 超 链接 .电子 邮件 超 链接 、 锚 超 链接 和 空 超 链接 。 


6.3.1 添加 基本 超 链接 


基本 超 链 接 包括 文本 超 链接 和 图 像 超 链接 ,这 两 种 超 链接 是 网 页 中 最 常见 的 超 链 接 方 
式 。 选 择 文本 或 图 像 后 ,在 “属性 ?面板 中 进行 相应 设置 即 可 完成 链接 的 添加 。 

文本 超 链接 的 “属性 ”面板 中 的 “目标 "下拉 列表 框 中 各 选项 的 含义 如 下 。 

A) _blank 选项 ; 单 击 超 链接 文本 后 ,目标 端点 网 页 会 在 一 个 新 窗口 中 打开 。 

(2) _parent 选项 : 单 击 超 链 接 文本 后 ,在 上 一 级 浏览 器 窗口 中 显示 目标 端点 网 页 ,该 
方式 在 框架 网 页 中 比较 常用 。 

(3) _self 选项 : 单 击 超 链 接 文本 后 ,在 当前 浏览 器 窗口 中 显示 目标 端点 网 页 , 即 蔡 换 掉 
原来 的 网 页 。 这 是 Dreamweaver 的 默认 设置 ,如 果 需 要 的 打开 方式 就 是 该 方式 ,可 以 不 在 
“目标 下拉 列表 框 中 进行 选择 。 

(4) _top 选项 : 单 击 超 链 接 文本 后 ,在 最 顶层 的 浏览 器 窗口 中 显示 目标 端点 网 页 。 

下 面 以 添加 文本 超 链 接 为 例 进行 介绍 ,其 操作 步骤 如 下 : 

(1) 在 网 页 中 选择 要 创建 超 链接 的 文本 “This is a hyperlink!1”。 单 击 “ 属 性 ”面板 中 的 
“链接 ”如 图 6. 36 所 示 。 


图 6.36 “超级 链接 ”对 话 框 


(2) 可 填充 图 6. 36 各 项 内 容 , 也 可 直接 单 击 “ 确 定 ” 按 钮 , 单 击 “确定 ”按钮 后 可 以 通过 
属性 面板 进行 设置 ,如 图 6. 37 所 示 。 

(3) 单 击 “ 确 定 ” 按 钮 关闭 “选择 文件 ”对 话 框 。 

(4) 在 “属性 ”面板 中 的 “目标 ”下 拉 列 表 框 中 选择 链接 网 页 打开 的 方式 , 即 可 完成 文本 
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链接 的 创建 ,如 图 6. 37 所 示 。 


a 注 S LA we 
BI i535 3 23 Bq | 


(<> vm] | 格式 四 无 Y 类 | 无 ¥ 
boss DO [无 v 链接 LL) # “90 Bol vl 
(Wm) eos 


图 6.37 选择 打开 目标 端点 网 页 的 方式 (图 换 掉 ) 


6.3.2 添加 图 像 热点 超 链接 


图 像 热 点 超 链接 是 指 在 一 幅 图 像 上 的 不 同 区 域 设置 多 个 超 链接 。 在 添加 图 像 热 点 超 链 
接 时 ,首先 需 选择 图 像 ,使 用 如 图 6. 38 所 示 的 “属性 ”面板 左下 角 的 热点 创建 工具 进行 热点 
区 域 的 创建 ,然后 分 别 选择 所 创建 的 热点 区 域 , 在 “链接 "文本 框 中 输入 目标 端点 网 页 的 路 径 


及 名 称 即 可 。 


ay Bik, 20K EW [366 | 源 文件 @) /Exanple6 3/mep. jpg G O BAO | ~y) 类 @)| 无 x] 
S m| ] 高 (300 Ro jon 88 2Ps ; 

地 图 如 |Smwew! | are em! | NAO A 

fk) DOU «FED! | mtel 96 MFO RUG vl 


图 6.38 “图 像 "属性 面板 
例 6.3 为 地 图 上 河南 的 区 域 创建 热点 ,链接 到 henan. html. 
(1) 选择 图 像 ,在 "属性 "面板 中 选择 一 个 热点 创建 工具 ,这 里 选择 "多边 形 热点 工 


A'S. 
(2) 按 住 鼠 标 左 键 不 放 并 拖 动 鼠 标 光 标 在 图 像 中 的 树叶 轮廓 上 绘制 出 需 添加 的 超 链接 


G) 在 “属性 ”面板 的 “链接 "文本 框 中 输入 要 链接 网 页 的 URL 地 址 ,在 “目标 "下 拉 列 表 


框 中 选择 打开 目标 页 的 方式 ,如 图 6. 39 所 示 。 


属性 
到 热点 链接 L) [henen. htnl iso 
BŒ) | _blank Y Sno ~ 
地 图 Map 


fk) DOU 
图 6. 39 为 热点 区 域 设置 属性 


(4) 用 同样 的 方法 可 以 设置 其 他 热点 区 域 ,然后 保存 网 页 。 


6.3.3 添加 电子 邮件 的 超 链 接 


使 用 电子 邮件 超 链接 可 以 方便 地 进行 电子 邮件 的 发 送 ,便于 网 站 管理 者 收集 用 户 对 网 
站 的 反馈 信息 。 添 加 电子 邮件 超 链接 的 方法 很 简单 ,只 需 将 鼠标 光标 定位 到 要 显示 电子 邮 
件 超 链接 文本 的 位 置 ,在 插入 栏 "常用 ”Tab 页 中 单 击 “ 电 子 邮件 链接 ”按钮 或 选择 “插入 ”一 
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“电子 邮件 链接 ”命令 ,在 打开 的 “电子 邮件 链接 ”对 话 框 的 “文本 ”文本 框 中 输入 要 显示 的 电 
子 邮 件 链接 文本 ,在 E-mail 文本 中 输入 要 连接 的 邮箱 地 址 , 单 击 “ 确 定 ” 按 钮 即 可 。 


6.3.4 添加 锚 链 接 


锚 链 接 的 功能 是 实现 源 文件 文档 与 目标 文档 中 指定 部 分 的 快速 跳 转 。 它 可 以 跳 转 到 其 
他 网 页 中 的 指定 位 置 , 也 可 以 跳 转 到 当前 网 页 中 的 指定 位 置 。 锚 链接 的 添加 分 为 创建 命名 
锚 记 和 创建 链接 两 部 分 ,命名 锚 记 可 以 理解 为 目标 端点 ,不 过 它 不 是 整个 网 页 ,而 是 网 页 的 
某 一 个 位 置 ; 创建 链接 命名 锚 记 即 创建 对 应 的 链接 端点 。 添 加 锚 链 接 的 操作 步骤 如 下 : 

(1) 将 插入 点 定位 到 要 创建 命名 锚 记 的 位 置 或 选择 要 指定 的 命名 锚 记 的 文本 ,选择 “ 插 
入 ”一 “命名 锚 记 ”的 命令 ,打开 “命名 锚 记 ”对 话 框 ,在 “ 锚 记 名 称 ” 文 本 框 中 输入 销 链 接 的 名 
称 , 如 图 6. 40 所 示 。 

(2) 单 击 “ 确 定 ” 按 钮 完成 命名 锚 记 的 创建 ,在 定位 点 即 出 现 锚 记 符号 。 

(3) 选择 要 添加 锁链 接 的 文本 或 图 像 , 在 “属性 ”面板 中 的 “链接 "文本 框 中 输入 “#” 符 
号 ,再 输入 命令 锚 记 的 名 称 。 如 果 目 标 端 点 与 锚 记 不 在 同一 个 网 页 中 , 则 应 先 写 上 网 页 的 路 
径 及 名 称 , 然 后 加 上 前 级“ #” 和 锚 记 名 称 , 在 “目标 "下 拉 列 表 框 中 输入 打开 网 页 的 方法 , 完 
成 链接 命名 锚 记 的 创建 。 


图 6.40 “命名 锚 记 ”对 话 框 


6.3.5 添加 空 超 链 接 


空 超 链 接 是 指 未 指定 目标 端点 的 链接 , 它 用 于 为 页 面 上 的 对 象 附 加 行为 。 如 果 要 为 网 
页 文本 或 图 像 添加 脚本 代码 实现 一 些 特 殊 的 功能 , 则 需要 添加 空 超 链接 。 其 方法 为 : 选择 
要 添加 空 超 链接 的 文本 或 图 像 后 ,在 “属性 ”面板 中 的 “链接 ”下 拉 列 表 框 或 “链接 ”文本 框 中 
输入 “#” 符 号 即 可 。 


(6.4 网 页 布局 设计 
A 


6.4.1 使 用 表格 布局 网 页 


使 用 表格 进行 网 页 布局 是 以 前 最 流行 的 网 页 布局 方式 ,但 由 于 表格 的 一 些 特殊 缺点 (如 
加 载 表格 式 网 页 时 必须 将 整个 表格 的 内 容 加 载 完 成 后 才能 显示 内 容 以 致 严重 影响 网 页 的 打 
开 速 度 等 ) ,使 用 表格 进行 网 页 布局 将 会 越 来 越 少 , 但 使 用 表格 格式 化 数据 的 显示 仍 会 是 表 
格 的 一 个 重要 的 应 用 ,下 面 讲解 表格 的 相关 知识 。 
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1. 创建 表格 


在 Dreamweaver CS5 中 可 以 创建 普通 表格 ,也 可 以 创建 供 套 表格 ,下 面 分 别 进行 讲解 。 

(1) 创建 普通 表格 

在 Dreamweaver CS5 中 创建 普通 表格 的 操作 与 在 Word 中 创建 表格 的 方法 基本 相同 ， 
其 操作 步骤 如 下 : 

OD 将 插入 点 定位 到 需 创建 表格 的 位 置 。 

© 选择 “插入” 一 “表格 "命令 或 在 “常用 ”插入 栏 中 单 击 “ 表 格 " 按 钮 ,打开 “表格 ”对 话 框 。 

© 在 “ 行 数列 数 " 文 本 框 中 分 别 输 入 “6” 和 “4”。 

@ 在 “表格 宽度 ”文本 框 中 输入 表格 的 宽度 ,在 其 后 的 下 拉 列 表 框 中 选择 度量 单位 。 

© 在 “边框 粗细 ”文本 框 中 输入 表格 边框 的 粗细 ,如 “0”。 

© 在 “单元 格 边 距 ” 文 本 框 中 输入 单元 格 中 的 内 容 与 单元 格 边 框 之 间 的 距离 值 。 这 是 
为 了 查看 其 效果 ,为 其 设置 一 个 较 大 的 值 *6”。 

© 在 “单元 格 边 距 ” 文 本 框 中 输入 单元 格 与 单元 格 之 间 的 距离 值 。 这 是 为 了 查看 其 效 
果 , 为 其 设置 一 个 较 大 的 值 *6”, 如 图 6.41 所 示 。 

@ 设置 完成 后 单 击 “ 确 定 ” 按 钮 关闭 对 话 框 , 即 完 成 表格 的 创建 ,创建 的 表格 效果 如 
图 6.42 所 示 。 


图 6.41 “表格 ”对话 框 图 6.42 创建 的 表格 


(2) ERER 

为 了 使 布局 更 符合 实际 需要 ,可 以 在 表格 的 某 些 单元 格 中 再 插入 一 个 表格 ,新 插入 的 表 
格 即 为 骨 套 表格 。 在 创建 谋 套 表格 时 ,需要 注意 嵌 套 层 数 不 要 太 多 ,否则 会 影响 网 页 的 加 载 
速度 。 创 建 谋 套 表格 的 操作 步骤 如 下 : 

O 将 插入 点 定位 到 需 创建 庶 套 表格 的 单元 格 中 。 

O 选择 “插入 ”一 “表格 ”命令 或 在 “常用 ”插入 栏 中 单 击 苹 按钮 ,打开 “表格 ”对 话 框 。 

@ 在 对 话 框 中 根据 实际 情况 进行 行 数 、 列 数 、 宽 度 和 边框 等 属性 的 设置 。 
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@ 设置 完成 后 ,如 图 6. 43 所 示 , 单 击 “ 确 定 ” 按 钮 完成 谋 套 表格 的 创建 ,如 图 6. 44 
所 示 。 


图 6.43 “表格 ”对 话 框 图 6.44 创建 的 嵌 套 的 表格 


2. 编辑 表格 


除了 使 用 嵌 套 表格 可 以 让 表格 布局 更 加 合理 外 ,有 时 也 需要 对 表格 中 的 单元 格 进 行 拆 
分 、 合 并 或 删除 等 操作 ,在 执行 这 些 操作 之 前 ,应 先 选择 要 操作 的 对 象 ,如 整个 表格 、 某 行 或 
某 几 个 单元 格 等 。 


3. 设置 表格 和 单元 格 属性 


插入 表格 后 ,可 在 “属性 ”面板 中 对 表格 或 单元 格 的 属性 进行 设置 。 

(1) 设置 表格 属性 

选中 表格 的 “属性 ”面板 ,如 图 6. 45 所 示 , 可 对 表格 的 属性 进行 设置 ,其 中 各 项 的 参数 的 
含义 如 下 : 


er 
EEJ Tf Bw 200 her ~ saw | WW RA v| 类 包 | 无 ~ 
一 vy) ao’ (AES) | | 边框 @) 0 

SE > 16 


图 6.45 “属性 ”面板 


。，“ 表 格 ” 下 拉 列 表 框 : 为 表 框 进行 命名 ,可 用 于 脚本 的 应 用 或 定义 CSS 样式 。 

“ 行 ? 和 "* 列 "文本 框 : 设置 表格 的 行 数 或 列 数 。 

“ 宽 " 文 本 框 : 设置 表格 的 宽度 ,在 其 后 的 下 拉 表 框 中 选择 度量 单位 ,如 “像素 ”或 “ 百 
atte”. 

“填充 ?文本 框 : 设置 单元 格 边界 和 单元 格 内 容 之 间 的 距离 ,在 “表格 ”对话 框 中 对 应 
“单元 格 边 距 ”文本 框 。 
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“间距 ”文本 框 : 设置 相 邻 单元 格 之 间 的 距离 ,在 “表格 "对话 框 中 对 应 “单元 格 间距 ” 
文本 框 。 

“对 齐 ” 下 拉 列 表 框 : 设置 表格 与 文本 或 图 像 等 网 页 元 素 之 间 的 对 齐 方式 ,只 限于 和 
表格 同 段 落 的 元 素 。 

“边框 "文本 框 : 设置 边框 的 粗细 ,通常 设置 为 0 ,如 果 需 要 边框 ,通常 通过 定义 CSS 
样式 来 实现 。 

“K”: 设置 表格 应 用 的 CSS 格式 。 


(2) 设置 单元 格 属性 

除了 设置 表格 的 属性 外 ,通常 还 需要 对 表格 中 的 单元 格 属性 进行 设置 ,如 单元 格 的 背景 
颜色 .背景 图 像 .单元 格 中 的 文本 对 齐 方式 等 。 

选中 表格 中 的 单元 格 (可 以 同时 选择 多 个 单元 格 ,连续 或 不 连续 的 皆 可 ) 后 ,在 “属性 ? 面 
板 中 即 可 对 其 属性 进行 设置 。 

单元 格 “ 属 性 ”面板 (如 图 6. 46 所 示 ) 上 半 部 分 与 选中 文本 时 的 “属性 ?面板 相同 ,主要 用 
于 设置 单元 格 中 的 文本 的 属性 ,下 半 部 分 主要 用 于 设置 单元 格 的 属性 ,其 中 各 项 参数 的 含义 


如 下 。 

属性 

[Km] BRO [无 > 类 无 v| BZ SS 4 REO 

iB css mq) 无 ~ BED voo BRO 

=£) 单元 格 KFORU v| Bw 不 换行 @) 口 ”背景 颜色 (G) r] | Roe 
一 sit Saou ~ 高 中 标题 E) 口 ] 


图 6.46 “属性 ”面板 


按钮 国 | : 单 击 该 按钮 可 合并 选中 的 单元 格 。 

按钮 FE : 单 击 该 按钮 课 进行 单元 格 的 拆 分 操作 。 

KE FAIRE: 用 于 设置 单元 格 中 内 容 在 水 平方 向 上 的 对 齐 方式 ,包括 “ 左 对 
齐 ”“ 居 中 对 齐 ”“ 右 对 齐 ” 和 “默认 ”4 个 选项 。 

“垂直 ”下 拉 列 表 框 : 用 于 设置 单元 格 中 内 容 在 垂直 方向 上 的 对 齐 方 式 , 包 括 “ 顶 
端 "“ 居 中 ”“ 底 部 ”“ 基 线 ” 和 “默认 ”5 个 选项 。 

“ 宽 " 文 本 框 : 设置 单元 格 的 宽度 ,如 果 直 接 输入 数字 , 则 默认 度量 单位 为 “像素 ”, 如 
果 要 以 “百分比 ”作为 度量 单位 , 则 应 在 输入 数字 的 同时 输入 *%" 符 号 ,如 “90%”。 
“高 "文本 框 : 设置 单元 格 的 高 度 ,通常 无 须 进 行 设置 。 

“不 换行 " 复 选 框 : 选中 该 复 选 框 可 以 防止 换行 ,使 给 定 的 单元 格 中 的 所 有 文本 都 在 
=AT Es 

“标题 " 复 选 框 : 可 以 将 所 选 的 单元 格格 式 设置 为 表格 标题 单元 格 ( 也 可 通过 “表格 ” 
对 话 框 中 的 “页 眉 ” 栏 进行 设置 )。 默 认 情 况 下 .表格 标题 单元 格 的 内 容 为 粗 体 并 且 
居中 。 

“背景 颜色 ”文本 框 : 用 于 设置 单元 格 的 背景 颜色 。 
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6.4.2 使 用 AP 元素 布局 网 页 


AP 元 素 在 早期 的 Dreamweaver 软件 中 称 为 层 , 在 Dreamweaver CS5 中 对 其 功能 进行 
了 增强 ,为 此 Adobe 公司 为 其 取 了 一 个 更 贴切 的 名 称 一 一 AP 元 素 。 

AP 元 素 最 大 的 特点 是 具有 极 高 的 灵活 性 ,用 户 可 以 将 AP 元 素 放置 在 页 面 中 的 任何 位 
HA AP 元 素 可 以 重 倒 ,也 可 以 隐藏 或 显示 ,在 制作 一 些 特殊 效果 时 是 非常 有 用 的 。 


1. 创建 AP 元 素 


AP 元素 的 创建 很 简单 , 像 在 Photoshop, Fireworks 等 图 形 软件 中 绘制 矩形 一 样 , 可 以 
理解 为 AP 元 素 是 一 个 灵活 移动 的 矩形 框 。 

(1) 创建 普通 的 AP 元 素 

创建 普通 的 AP 元 素 的 操作 步骤 如 下 : 

O 将 “插入 ” 栏 切换 到 “布局 "插入 栏 , 单 击 “ 绘 制 AP 元 素 ” 按 钮 时 ,如 图 6. 47 所 示 。 

© 在 编辑 窗口 中 任意 位 置 按 下 鼠标 左 键 不 放 进 行 拖 动 即 可 创建 AP 元 素 。 


AM MM ÆR | ME Spry Incontezt Editing XE BAR| 
carne 日 日 


图 6.47 单 击 “ 绘 制 AP 元 素 " 按 钮 


(2) 创建 谋 套 AP 元 素 

AP 元 素 与 表格 一 样 ,也 可 以 进行 嵌 套 ,而 且 可 以 嵌 套 多 层 。 舱 套 的 AP 元 素 之 间 有 非 
常 紧密 的 关系 ,如 拖 动 外 层 AP 元 素 时 可 以 同时 移动 内 层 侍 套 AP 元 素 , 而 且 可 以 同时 设置 
其 隐藏 属性 等 。 

DERE AP 元 素 的 方法 很 简单 ,其 操作 步骤 如 下 : 

O 将 插入 点 定位 到 需要 创建 谋 套 的 AP 元 素 中 。 

© 选择 “插入 ”一 “布局 对 象 ”>AP Div 命令 即 可 在 现 有 AP 元 素 中 创建 一 个 AP 元 素 。 

@ 将 插入 点 定位 到 新 创建 的 组 套 AP 元 素 中 。 

@ 在 “布局 "插入 栏 中 单 击 “ 绘 制 AP TOR "HG. HERR AP 元 素 中 进行 拖 动 ,可 以 绘制 
出 一 个 新 的 嵌 套 AP 元 素 。 


2. 编辑 AP 元 素 


要 对 AP 元 素 进 行 编辑 , 仍 需 要 先 选 择 AP 元 素 ,然后 再 进行 AP 元 素 的 大 小 调整 ,对 齐 
AP 元 素 , AP 元素 的 堆 琶 顺序 设置 及 AP 元 素 的 显示 与 隐藏 设置 等 操作 。 

选择 “窗口 ”>“AP TER” a SAT IF AP 元 素面 板 , 如 图 6. 48 所 示 。 在 “AP 元 素 ” 面 板 
中 显示 了 网 页 中 所 有 的 AP 元 素 及 各 个 AP 元 素 之 间 的 关系 ,在 AP 元素” 面板 中 可 以 选择 
AP 元 素 ,设置 AP 元 素 的 显示 属性 ,设置 AP 元 素 的 堆 生 顺序 及 重 命 名 AP 元 素 。 另 外 ,在 
编辑 窗口 及 “属性 ”面板 中 也 可 对 AP 元 素 进行 一 些 编辑 ,如 设置 隐藏 或 显示 属性 等 ,下 面 分 
别 讲解 其 设置 方法 。 
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图 6.48 “AP 元 素 ” 面 板 


(1) 选择 AP 元 素 

在 “AP 元 素 "面板 及 编辑 窗口 中 选择 AP 元 素 的 操作 步 又 如 下 : 

© 打开 “AP 元素 ”面板 。 

© 单 击 要 选择 的 AP 元 素 的 名 称 ,选择 该 AP 元 素 。 

© 按 住 Shift 键 后 依次 在 “AP 元 素 ” 面 板 中 单 击 需 选中 AP 元 素 的 名 称 即 可 选中 多 个 
AP 元 素 , 如 图 6. 49 所 示 。 


图 6.49 选择 单个 AP 元 素 


@ 在 编辑 窗口 中 单 击 要 选择 的 AP 元 素 的 边框 即 可 选择 单个 AP 元 素 。 

© 按 住 Shift 键 后 依次 在 需要 选中 的 AP 元 素 中 或 AP 元 素 边 框 上 单 击 可 选中 多 个 
AP 元 素 。 

(2) 调整 AP 元 素 的 大 小 

选中 要 调整 大 小 的 AP 元 素 后 ,在 编辑 窗口 中 即 可 对 其 进行 大 小 的 调整 ,如 果 要 是 选中 
的 AP 元 素 具 有 相同 的 高 度 或 宽度 , 则 可 以 选择 相应 的 菜单 命令 来 完成 ,其 操作 步骤 如 下 : 

@ 将 鼠标 指针 移 至 要 调整 大 小 的 AP 元 素 的 边框 上 , 边 调整 大 小 , 边 观 察 *“ 属 性 ?面板 
中 动态 显示 的 “ 宽 " 和 “高 ”数值 并 进行 拖 动 , 至 需要 大 小 后 释放 鼠标 即 可 。 

© 选中 左 侧 的 AP 元素 ,在 “属性 ”面板 的 “ 宽 ”"“ 高 ”文本 框 中 分 别 输入 相应 数值 。 
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@ 将 鼠标 指针 移动 到 右 侧 的 AP 元 素 中 单 击 ,再 将 鼠标 指针 移动 到 左 侧 的 AP 元 素 中 ， 
按 住 Shift 键 并 单 击 鼠 标 左 键 ,完成 两 个 AP 元 素 的 选择 。 

@ 选择 “修改 ”一 “排列 顺序 ”>“ 设 成 宽度 相同 "命令 。 

(3) 对 齐 AP 元 素 

对 齐 AP 元 素 是 网 页 制作 常 遇 到 的 问题 ,选择 AP 元素 后 ,选择 相应 的 菜单 命令 即 可 进 
47 AP 元 素 的 对 齐 操作 ,其 操作 步骤 如 下 : 

O 选择 需 对 齐 的 所 有 AP 元 素 ( 先 选择 右 侧 的 AP 元 素 ,再 选择 左 侧 的 AP ER). 

@ 选择 “修改 ”一 “排列 顺序 ”>“ 左 对 齐 ” 命 令 , 完 成 AP 元 素 的 左 对 齐 操作 。 

© 选择 “修改 ”>“ 排 列 顺序 ”>“ 对 齐 下 缘 "命令 ,完成 AP 元 素 下 缘 对 齐 操作 。 

(4) 移动 AP 元 素 

选择 需 移 动 的 AP 元 素 后 ,将 鼠标 指针 移动 到 AP 元 素 边框 上 , 当 鼠 标 指针 变 为 < 人 形 
状 时 , 按 住 鼠 标 左 键 不 放 进行 拖 动 , 到 需要 的 位 置 后 释放 鼠标 即 可 。 

(5) 设置 AP FOR AY HE HE 

AP 70H WAH. BEAM Photoshop 或 Firework 等 图 形 图 像 软件 中 的 “图 层 ” 一 样 ,不 同 
的 重 伙 顺序 可 能 导致 不 同 的 效果 ,因此 ,设置 合理 的 堆 秋 顺序 是 非常 有 必要 的 。 

在 “AP 元素” 面板 或 属性 面板 中 可 以 进行 AP 元 素 堆 释 顺 序 的 设置 ,其 他 操作 步 又 
如 下 

O 打开 *AP 元 素 ” 面 板 , 选 择 所 需 的 AP 元 素 , 按 住 鼠 标 左 键 不 放 将 其 拖 动 到 所 需 的 位 
置 后 释放 鼠标 即 可 。 

© 在 编辑 窗口 或 “AP 元 素 "面板 中 选择 需 改变 堆 释 顺序 的 AP 元 素 后 ,在 “属性 ”面板 
中 的 “Z 轴 "” 文 本 框 中 输入 所 需 的 数值 ,大 于 原 数 字 可 将 该 AP 元 素 在 堆 释 顺序 中 上 移 , 小 于 
原 数字 可 将 该 AP 元 素 在 堆 释 顺序 中 下 移 , 完 成 输入 后 按 Enter 键 确认 。 

(6) 改变 AP 元 素 的 可 见 性 

设置 AP 元 素 的 可 见 性 就 是 设置 AP 元 素 的 显示 与 隐藏 ,可 以 动手 设置 AP 元 素 的 可 见 
性 ,也 可 以 通过 编写 JavaScript 代码 来 实现 AP 元 素 可 见 性 的 设置 。 

设置 AP 元素 的 可 见 性 的 具体 操作 步骤 如 下 : 

O 选择 要 设置 可 见 性 的 AP 元 素 后 ,在 选择 的 AP 元 素 上 单 击 鼠 标 右键 ,在 弹出 的 快捷 
菜单 中 选择 “可 视 性 ”|“ 隐 藏 "命令 ,再 在 编辑 窗口 的 空白 区 域 单 击 鼠 标 左 键 即 可 隐藏 AP 元 


素 , 如 图 6. 50 所 示 。 


© 在 “AP 元素 "面板 中 选择 隐藏 的 AP 元 素 ,再 单 击 前 面 的 国宝 泣 图 标 ,使 其 变 为 | 短 _ 
图 标 , 即 可 显示 AP 元 素 , 如 图 6. 51 所 示 。 


图 6.50 隐藏 AP 元 素 


如 下 。 
EO 
Tey CSS-P 元 素 AECL) | 234px| ÆW T] MO | RAR) | 加 ”类 名 | 无 ~ 
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图 6.51 显示 AP 元 素 


AP 元 素 的 属性 设置 


创建 AP 元 素 后 ,可 以 在 “属性 ”面板 中 对 AP 元 素 的 属性 进行 设置 ,下 面 分 别 讲解 单个 
AP 元 素 和 多 个 AP 元 素 的 属性 设置 方法 。 

(1) 设置 单个 AP 元 素 的 属性 

选择 要 设置 属性 的 单个 AP 元 素 , 其 "属性 ?面板 如 图 6. 52 所 示 。 面 板 中 各 设置 项 含义 


it ~ Ba 左 | EJI ] 


a 
图 6.52 单个 AP 元素 的 “属性 ?面板 


CSS-P 元 素 下 拉 列 表 框 : 可 为 当前 AP 元 素 命名 ,该 名 称 可 在 脚本 中 引用 ,如 通过 编 
写 脚 本 实现 AP 元 素 的 显示 或 隐藏 等 。 

“ 左 "文本 框 : 设置 AP 元 素 左边 相对 于 页 面 左边 或 父 AP 元 素 左边 的 距离 。 

“上 "文本 框 : 设置 AP 元 素 顶 端 相 对 于 页 面 顶端 或 父 AP 元 素 顶 端的 距离 。 

“ 宽 " 文 本 框 : 设置 AP 元 素 的 宽度 值 。 

“高 "文本 框 : 设置 AP 元 素 的 高 度 值 。 

“Z 轴 ”文本 框 : 设置 AP 元 素 的 Z 轴 顺序 ,也 就 是 设置 嵌 套 AP 元 素 在 网 页 中 的 堆 
全 顺序 , 较 高 值 AP 元 素 位 于 较 低 值 的 AP 元 素 的 上 方 。 

“可 见 性 ”下 拉 列 表 框 : 设置 AP 元 素 的 可 见 性 ,其 中 default 选项 为 默认 值 ,其 可 见 
性 由 浏览 器 决定 ,大 多 数 浏览 器 会 继承 该 AP 元 素 的 父 AP 元 素 的 可 见 性 ; inherit 
选项 表示 继承 其 父 AP 元 素 的 可 见 性 ; visible 选项 表示 显示 AP 元 素 及 其 内 容 , 而 
与 其 父 AP 元 素 无 关 ; hidden 选项 表示 隐藏 AP 元 素 及 其 内 容 , 与 父 AP 元 素 无 关 。 
“背景 图 像 "文本 框 : 用 于 设置 背景 图 像 , 单 击 回 按钮 ,在 打开 的 “选择 图 像 源 文件 ” 
对 话 框 中 可 选择 所 需 的 背景 图 像 。 

“背景 颜色 "文本 框 : 设置 AP 元 素 的 背景 颜色 。 

“类 ”下 拉 列 表 框 : 选择 AP 元 素 的 样式 。 

“溢出 "下拉 列 表 框 : 选择 当 AP 元 素 中 的 内 容 超出 AP 元 素 的 范围 后 显示 内 容 的 方 
式 , 其 中 : visible 选项 表示 当 AP 元 素 中 的 内 容 超出 AP 元 素 的 范围 时 ,AP 元 素 自 
动向 右 或 向 下 扩展 ,使 AP 元 素 能 够 容纳 并 显示 其 中 的 内 容 ; hidden 选项 表示 当 
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AP 元 素 中 的 内 容 超出 AP 元 素 范围 时 ,AP 元 素 的 大 小 保持 不 变 , 也 不 出 现 滚动 条 ， 
超出 AP 元 素 范围 的 内 容 将 不 显示 ; scroll 选项 表示 无 论 AP 元 素 中 的 内 容 是 否 超 
出 AP 元素 范围 ,AP 元 素 的 右 端 和 下 端 都 会 出 现 滚动 条 ; auto 选项 表示 当 AP 元 素 
中 的 内 容 超 出 AP 元 素 范围 时 ,AP 元 素 的 大 小 保持 不 变 ,但 是 在 AP 元 素 的 左 端 或 下 
端 会 出 现 滚动 条 ,以 便 使 AP 元 素 中 超出 范围 的 内 容 能 够 通过 拖 动 滚动 条 来 显示 。 

。“ 剪 辑 ? 栏 : 在 该 栏 中 可 设置 AP 元 素 的 可 见 区域 。 其 中 “ 左 ”“ 右 ” “上 ”和 “下 ”4 个 
文本 框 分 别 用 于 设置 AP 元 素 在 各 个 方向 上 的 可 见 区 域 与 AP 元 素 边界 的 距离 ,其 
单位 为 “像素 ”。 

(2) 设置 多 个 AP 元 素 的 属性 

在 Dreamweaver CS5 中 可 同时 选择 多 个 AP 元 素 进行 相同 的 属性 设置 ,选择 多 个 AP 

元 素 后 的 “属性 ”面板 如 图 6. 53 所 示 。 


pl 
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图 6.53 选择 多 个 AP 元 素 的 “属性 ”面板 


在 多 个 AP 元 素 的 “属性 ?面板 中 部 可 以 设置 AP 元 素 中 文本 的 样式 ,大 部 分 属性 与 单 
个 AP 元 素 的 “属性 ?面板 相同 ,不 同 的 是 多 个 AP 元 素 的 “属性 ?面板 中 多 了 一 个 “标签 "下 
拉 列 表 框 ,其 中 包括 DIV 和 SPAN 两 个 选项 ,二 者 的 功能 基本 相同 ,但 选择 DIV 选项 时 , 通 
常会 独占 一 行 , 即 在 其 后 不 能 再 添加 其 他 对 象 , 而 选择 SPAN 选项 则 不 同 , 在 SPAN 标签 后 
是 可 以 继续 添加 其 他 对 象 的 。 


6.4.3 使 用 框架 布局 网 页 


通常 在 一 个 浏览 器 页 面 中 只 能 显示 一 个 网 页 文档 的 内 容 , 如 果 需 要 在 同一 个 浏览 器 窗 
口中 显示 多 个 网 页 文档 的 内 容 ,就 需要 使 用 框架 或 iframe 浮动 框架 来 创建 。 下 面 讲 解 框架 
网 页 的 制作 与 设置 方法 。 


1. 创建 框架 集 


框架 集 是 框架 网 页 的 总 管 , 它 记录 了 框架 网 页 中 包括 的 框架 个 数 , 各 个 框架 的 大 小 和 位 
置 以 及 各 个 框架 对 应 的 网 页 文档 等 。 

框架 网 页 可 以 只 包含 一 个 框架 集 , 也 可 以 嵌 套 多 个 框架 集 ,其 操作 步骤 如 下 : 

d) 在 插入 栏 点 击 固 : 的 下 拉 箭头 会 出 现 如 图 6. 54 所 示 的 下 拉 菜 单 。 

(2) 在 图 6. 54 菜单 中 选择 要 插入 的 框架 , 单 击 选 中 的 项 目 弹 出 “框架 标签 辅助 功能 属 
性 ”对 话 框 ,如 图 6. 55 所 示 。 

(3) 单 击 “ 创 建 " 按 钮 ,打开 “框架 标签 辅助 功能 属性 ”对 话 框 ,在 “框架 ”下 拉 列 表 框 中 选 
择 某 个 框架 ,在 “标题 "文本 中 输入 该 框架 的 标题 .通常 保持 默认 设置 ,如 图 6. 55 所 示 。 

(4) 单 击 “ 确 定 ” 按 钮 关闭 对 话 框 ,完成 框架 网 页 的 创建 ,其 效果 如 图 6. 56 所 示 。 
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图 6.54 选择 框架 菜单 图 6. 55 “框架 标签 辅助 功能 属性 ”对 话 框 


aa | 
代码 | 拆 分 | 设计 | | 实时 代码 Ft RM Be eG C 


Co OAM: 


Dody) R] 9 100% ~ 395 x 134v 1 K/ 1# Unicode (UTF-8) 


图 6.56 创建 框架 


2. 编辑 框架 


创建 框架 后 ,可 以 选择 框架 ,并 进行 框架 大 小 的 调整 等 操作 。 


(1) 选择 框架 或 框架 集 

框架 和 框架 集 的 选择 可 在 编辑 窗口 中 进行 ,也 可 在 框架 面 
板 中 进行 。 选 择 框 架 操作 步骤 如 下 : 

O 在 需 选 择 的 框架 内 单 击 鼠标 左 键 即 可 选择 该 框架 .被 选 
择 的 框架 边框 以 虚线 显示 。 

@ 选择 “窗口 “框架 ”命令 显示 “框架 ”面板 后 ,直接 在 
“框架 ”面板 中 单 击 即 可 选择 相应 的 框架 ,被 选择 的 框架 在 面板 
中 以 粗 黑 框 显示 ,如 图 6. 57 所 示 。 

@ 在 编辑 窗口 中 将 鼠标 指针 移动 到 框架 集 所 在 的 框架 的 


6.57 “框架 ”面板 
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边框 线 上 单 击 , 即 可 选择 框架 集 。 

© 在 “框架 ”画板 中 将 鼠标 指针 移动 到 框架 集 边框 上 单 击 即 可 选择 框架 集 。 

(2) 拆 分 框架 

Dreamweaver CS5 默认 的 框架 集 可 能 不 适合 实际 需要 ,此 时 可 以 手动 对 框架 进行 拆 
分 ,如 将 某 个 框架 拆 分 为 左右 两 个 框架 等 ,其 步 又 如 下 : 

O 按 住 Alt 键 单 击 要 拆 分 的 框架 以 选中 该 框架 。 

© 按 住 Alt 键 的 同时 拖 动 框架 至 合适 的 位 置 后 释放 鼠标 , 即 完成 框架 的 拆 分 操作 。 

(3) 调整 框架 

在 编辑 窗口 中 可 以 手动 拖 动 框架 边框 调整 框架 的 大 小 ,但 这 种 调整 方法 不 是 很 精确 , 常 
需要 根据 在 浏览 器 中 的 效果 进行 多 次 的 修正 后 才能 达到 满意 效果 。 因 此 最 好 的 方法 是 直接 
在 “属性 ?面板 中 进行 框架 大 小 的 设置 ,其 操作 步骤 如 下 : 

D 选择 要 设置 大 小 的 框架 集 。 

© 在 “属性 ?面板 右 侧 单 击 要 设置 大 小 的 框架 ,再 在 “ 列 ? 数 值 框 中 输入 相应 的 数值 。 

© 使 用 同样 的 方法 ,完成 其 他 框架 的 大 小 设置 。 

(4) 删除 框架 

若 需 删除 框架 ,可 用 鼠标 将 要 删除 框架 的 边框 拖 至 页 面 外 即 可 。 


3, 设置 框架 的 属性 


选择 框架 或 框架 集 后 ,可 在 “属性 ?面板 中 设置 其 属性 ,除了 前 面 讲 的 设置 框架 的 大 小 
外 ,还 可 以 设置 如 名 称 、 源 文件 ,空白 边 距 ,滚动 特性 以 及 边框 特性 等 。 

(1) 设置 框架 的 属性 

选择 所 需 设 置 属性 的 框架 ,其 "属性 ?面板 如 图 6. 58 所 示 。 


属性 


Ol-a Ea Lis 
fleftFrane | BOO EF ¥ REA ameo | 
WARE W ] 
wre |] 


图 6.58 “框架 ”属性 面板 


“属性 ”面板 中 各 参数 含义 如 下 。 

。“ 框 架 名 称 ” 文 本 框 : 用 于 设置 框架 的 名 称 , 可 被 JavaScript 程序 引用 ,也 可 以 作为 打 
开 链 接 的 目标 框架 名 。 

。“ 源 文件 文本 框 : 显示 框架 网 页 文档 的 路 径 及 文件 名 , 单 击 文本 框 后 的 回 按钮 可 在 
打开 的 对 话 框 中 重新 定义 。 

。“ 滚 动 ? 下 拉 列 表 框 : 设置 框架 出 现 滚动 条 的 方式 “是 ”表示 始终 显示 滚动 条 ;“ 否 ” 

表示 始终 不 显示 深 动 条 ;“ 自 动 " 表 示 当 框架 文档 内 容 超出 了 框架 大 小 时 , 才 会 出 现 

框架 深 动 条 ;“ 上 默认” 表示 采用 大 多 数 浏览 器 采用 的 自动 方式 。 

“不 能 调整 大 小 ” 复 选 框 : 选中 该 复 选 框 则 不 能 在 浏览 器 中 通过 拖 动 框架 边框 来 改 

变 框 架 大 小 。 

“边框 ?下 拉 列 表 框 : 设置 是 否 显示 框架 的 边框 。 
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。“ 边 框 颜色 "文本 框 : 设置 框架 边框 的 颜色 。 

。“ 边 框 宽度 ”文本 框 : 输入 当前 框架 中 的 内 容 距 左右 边框 间 的 距离 。 
。“ 边 框 高 度 ” 文 本 框 : 输入 当前 框架 中 的 内 容 距 上 下 边框 间 的 距离 。 
(2) 设置 框架 集 的 属性 

选择 需要 设置 属性 的 框架 集 ,其 “属性 ”面板 如 图 6. 59 所 示 。 


I 


i CED- 


图 6.59 框架 集 * 属 性 ”面板 


框架 集 * 属 性 ?面板 各 设置 参数 含义 和 框架 * 属 性 ?面板 基本 相同 ,不 同 的 是 在 “ 行 ?或 
“ 列 ? 栏 中 可 设置 框架 的 行 或 列 的 宽度 ( 即 框架 的 大 小 ) ,在 * 单 位 ”下拉 列 表 框 中 选择 度量 单 
位 后 即 可 输入 所 需 的 数值 。 


4. 保存 框架 及 框架 集 网 页 


由 于 框架 集中 包括 多 个 网 页 ,因此 与 一 般 的 网 页 保存 方法 略 有 不 同 ,可 以 单独 保存 某 一 
个 框架 网 页 文档 ,也 可 以 单独 保存 框架 集 网 页 文档 ,另外 ,也 可 以 同时 保存 框架 集 及 所 有 的 
框架 网 页 的 文档 ,其 操作 步骤 如 下 : 

(1) 将 插入 点 定位 到 需要 保存 网 页 文档 的 框架 中 。 

(2) 选择 "文件 "| 保存 框架 ”命令 ,在 打开 的 “另存 为 ?对 话 框 中 的 “保存 在 ”下拉 列 表 框 
中 选择 保存 位 置 ,在 “文件 名 "文本 框 中 输入 文件 名 。 

(3) 单 击 “保存 ?按钮 即 可 完成 框架 网 页 文档 的 保存 。 

(4) 选择 所 需要 保存 网 页 文档 的 框架 集 。 

(5) 选择 “文件 ”1“ 框 架 集 另存 为 ”命令 ,在 打开 的 “另存 为 "对话 框 的 “保存 在 ”下 拉 列 表 
框 中 选择 保存 位 置 , 在 “文件 名 ”文本 框 中 输入 文件 名 。 

(6) 单 击 “ 保 存 ” 按 钮 即 可 完成 框架 集 网 页 文档 的 保存 。 

(7) 选择 “文件 ”1“ 保 存 全 部 ”命令 ,打开 “另存 为 ”对话 框 。 

(8) 在 “另存 为 "* 下 拉 列 表 框 中 选择 保存 的 路 径 , 在 “文件 名 ”文本 框 中 输入 网 页 文档 的 
名 称 。 

(9) 单 击 “ 保 存 ” 按 钮 完成 框架 网 页 文档 的 保存 ,同时 打开 “另存 为 ”对 话 框 进 行 其 他 框 
架 网 页 文档 的 保存 。 

(10) 使 用 相同 的 方法 完成 所 有 的 框架 或 框架 集 网 页 文档 的 保存 。 


6.5 使 用 CSS 样式 表 


在 Dreamweaver CS5 中 应 用 CSS 时 ,有 两 种 方法 ,一 种 是 建立 CSS 文件 ,然后 在 网 页 
中 引用 , 另 一 种 是 直接 在 网 页 中 建立 CSS 样式 ,然后 应 用 。 
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6.5.1 使 用 CSS 文件 


1. 创建 CSS 文件 


在 Dreamweaver CS5 中 要 创建 一 个 CSS 文件 ,在 欢迎 界面 ,选择 新 建 CSS ,新 建 一 个 


CSS 文件 ,如 图 6. 60 所 示 。 


Dw 


| wit » | O O sw 


XPD SED 查看 (WD MAD BAM BO 命令) MAD T 


| <> sa, 


ib ess 


REU E 7 
mD i ~ RED 


图 6.60 新 建 CSS 文件 


打开 CSS 样式 面板 ,如 图 6. 61 所 示 。 在 空白 区 点 击 鼠 标 右键 ,选择 新建” 弹出“ 新建 
CSS 规则 ”对 话 框 ,如 图 6. 62 所 示 。 


t =P x| 
ESG e797 


图 6. 61 “CSS 样式 ”面板 


新 建 css 规则 


选择 器 类 型 
A Css 规则 选择 上 下 文选 择 器 类 型 。 
类 ( 可 应 用 于 任何 HTML 元 素 ) 


选择 器 名 称 - 
选择 或 输入 选择 器 名 称 。 


图 6. 62 “新 建 CSS 规则 ”对 话 框 
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单 击 选 择 器 类 型 ,可 以 看 到 选择 器 类 型 有 4 种 ,如 图 6. 63 所 示 , 分 别 是 类 (可 应 用 于 任 
何 HTML 元 素 ),ID( 仅 用 于 一 个 HTML 元 素 ) ,标签 (重新 定义 HTML 元 素 ) 和 复合 内 容 
(基于 选择 的 内 容 ) ,这 里 选用 第 一 种 。 输 入 自选 的 选择 器 名 称 “. font”, 然 后 单 击 确定 ,弹出 
“CSS 规则 定义 ”对 话 框 ,并 修改 部 分 属性 的 值 ,如 图 6. 64 所 示 , 单 击 “ 确 定 ” 按 钮 ,CSS 文件 
中 就 会 出 现 如 图 6. 65 所 示 内 容 。 

保存 这 个 文件 ,并 命名 为 Example6-4. css. 


Jæ css 规则 


选择 器 类 型 : 
为 css 规则 选择 上 下 文选 择 器 类 型 。 
类 ( 可 应 用 于 任何 HNL 元 来 


PS ET 


"font" 的 HTML 元 素 。 


规则 定义 - 
选择 定义 规则 的 位 置 。 


COPED O OO O 


图 6.63 输入 选择 器 名 称 


-font 的 CSS 规则 定义 (在 example6-1.css 中 ) 


二 
| 
时 
led 


Font-£amily Œ): | 新 
Font-size (S): Font-wei ght W): bolder ] 
Font-style T): Font-variant V): 


Line-hei ght (1): Text-transforn (Œ): | 


akaroa 
EEA eiA AN, 


Text-decoration@): []underline U) Color ©) : WA] #000 


overline (0) 
line-through L) 
blink (B) 

none (N) 


图 6.64 CSS 规则 定义 对 话 框 
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2. 应 用 CSS 文件 


例 6.4 应 用 CSS 文件 的 例子 。 
(1) 建立 空白 HTML 文件 ,并 链接 已 有 的 CSS 文件。 


新 建 一 个 HTML 空白 文档 并 命名 为 Example6-4. html, 打 开 CSS 面板 ,选择 “附加 样 


tt 


式 表 ”, 如 图 6. 66 所 示 , 弹 出 一 个 “链接 外 部 样式 表 ” 对 话 框 ,如 图 6. 67 所 示 。 


Bcharset “utt-8"; 


«font 
font-family: “MRS; 
font-size: 18px: 
color: #000; 
font-weight: bolder: 
text-decoration: line-through: 
font-style: italic: 


居 用 这 定 规 则 中 时 用 的 所 有 项 
STAMPS MOM 


ES » 
oF mam 


‘Biter w 
图 6.65 CSS 文件 内 容 图 6.66 选择 附加 样式 表 


链接 外 部 样式 表 
文件 /URL @): SE 
添加 为 : © wz L) 
口 导入 四 ) 


REW: 


~ 
您 也 可 以 输入 逗号 分 隔 的 媒体 类 型 列表 。 


Dreamweaver 的 范例 样 式 表 可 以 帮助 您 起 步 。 


图 6.67 “链接 外 部 样式 表 ” 对 话 框 


在 图 6. 67 所 示 对 话 框 中 选择 前 面 建立 的 CSS 文件 example6-4. css, 然 后 单 击 “ 确 定 ” 按 


钮 ,CSS 面板 发 生 了 变化 ,面板 中 出 现 了 example6-4. css 中 定义 的 CSS 样式 ,如 图 6. 68 
所 示 。 


(2) 在 HTML 文件 中 放 入 内 容 。 

在 空白 网 页 example6-4. html 上 放置 一 段 文字 ,在 浏览 器 中 的 显示 如 图 6. 69 所 示 。 

(3) 对 网 页 中 的 元 素 应 用 CSS 样式 。 

在 Dreamweaver CS5 中 网 页 的 设计 状态 下 ,选中 文字 ,在 属性 面板 中 类 属性 中 选择 
“ font”, 如 图 6. 70 所 示 。 


选中 “. font” 样 式 后 ,网 页 中 文本 的 格式 会 发 生变 化 ,在 浏览 器 中 的 显示 如 图 6. 71 
所 示 。 
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图 6.68 链接 了 CSS 文件 后 的 CSS 面板 图 6.69 未 使 用 CSS 样式 


图 6.70 未 选中 的 为 应 用 CSS 样式 
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图 6.71 应 用 过 CSS 样式 的 效果 
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6.5.2 网 页 中 的 CSS 样式 


例 6.5 在 网 页 中 创建 并 应 用 CSS 样式 ,达到 和 例 6. 4 同样 的 效果 。 

新 建 一 个 HTML 文件 ,打开 CSS 面板 ,如 图 6.72 所 示 。 

在 图 6. 72 的 空白 区 域 单 击 鼠 标 右键 选择 “新 建 ”, 过程 如 6. 5. 1 节 中 一 样 ,结果 如 
图 6.73 所 示 。 

从 图 6. 73 中 可 以 看 出 , CSS 样式 定义 被 加 入 到 了 网 页 中 ,保存 网 页 并 命名 为 
Example6-5. html. 

在 Example6-5. html 中 输入 文字 ,操作 过 程 和 6. 5. 1 节 中 一 样 ,为 文字 选择 “. fone” FE 
式 , 在 浏览 器 中 显示 出 来 的 效果 和 图 6.71 一 样 。 


<!DOCTYPE html PUBLIC "-//W3C//DTD| 
“hetp: //www.w3. org/TR/xhtml1/DTD /x 
<html xmlns="http: //uww.w3. org/199 

<head> 


<zitle> 无 标题 文档 </cicle> 

<style type="text/css"> 

«font ( 
[eont-tamily: "新 宋体 "; 
font-size: 18px; 
font-style: italic; 
font-weight: bolder; 
color: #000; 
text-decoration: line-through;|* 


) 

i font-family “新 宋体 
se dem 
<body> 

</body> 

</html> 

[Et e705 
图 6.72 CSS 样式 模板 图 6.73 网 页 中 的 CSS 样式 


本 章 从 Dreamweaver 的 基础 知识 入 手 ,介绍 了 Dreamweaver 的 工作 界面 的 组 成 及 页 面 
属性 的 设置 。 讲 解 了 页 面 内 容 的 插入 与 使 用 方法 、 网 页 排版 和 布局 ,以 及 CSS 的 使 用 。 通 
过 本 章 的 学 习 , 和 希望 读者 能 初步 掌握 简单 网 页 制作 的 基础 知识 ,为 进一步 的 学 习 打 下 基础 。 


习题 


.段落 对 齐 有 左 对 齐 、 右 对 齐 、 和 4 种 方式 。 
. 在 Dreamweaver 中 插入 图 像 的 方法 主要 有 和 两 种 。 
. 大 多 数 浏览 器 默认 情况 按 边框 粗细 设置 为 显示 表格 。 


.如 何在 Web 页 面 中 添加 多 个 空格 ? 
. 框架 的 创建 有 哪 几 种 方法 ? 


n oe ww Ne 
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6. 设置 表格 或 单元 格 宽度 时 用 到 的 像素 和 百分比 有 何 区 别 ? 

7. 根据 本 章 所 学 内 容 , 请 读者 自己 用 表格 创建 一 个 Web 页 面 ,在 文档 中 输入 自己 的 简 
Ji ,并 根据 自己 的 想法 添加 字体 列表 ,并 设置 字体 的 大 小 、 颜 色 及 段落 对 齐 方式 ,并 在 页 面 内 
插入 一 些 图 片 。 

8. 对 比 Example6-4. html 和 Example6-5. html 代码 ,用 手动 输入 代码 的 方法 完成 这 两 
个 例子 ,并 去 掉 删 除 线 , 字 体 设 定 为 红色 。 

9. 根据 本 章 所 学 内 容 , 请 读者 自己 创建 一 个 基于 框架 的 网 站 。 


动画 制作 工具 Flash 


i Flash 简介 


Flash 是 Macromedia 公司 开发 的 一 款 优秀 的 网 页 动画 制作 软件 , 它 广泛 应 用 于 网 络 中 
的 多 种 领域 ,从 简单 的 动画 到 复杂 的 交互 式 Web 应 用 程序 ,无 所 不 在 。 用 户 在 友好 的 创作 
环境 下 通过 添加 图 片 .声音 和 视频 等 对 象 ,就 可 以 制作 出 精美 绚丽 的 Flash 动画 。Flash 和 
Dreamweaver、FireWorks 并 称 为 “网 页 三 剑客 ”。 

Flash 是 Web 设计 人 员 \ 交 互 式 媒体 专业 人 员 进 行 设 计 的 理想 著作 工具 。 该 工具 注重 
创建 .导入 和 处 理 多 种 类 型 的 媒体 (包括 音频 .视频 .位 图 .矢量 .文本 和 数据 ), 提 供 了 对 
Web 团队 (由 设计 人 员 和 开发 人 员 组 成 ?成员 之 间 的 工作 流程 进行 优化 的 项 目 管理 工具 。 
外 部 脚本 撰写 和 处 理 数 据 库 中 动态 数据 的 能 力 及 其 他 功能 使 得 Flash 特别 适用 于 大 规模 的 
复杂 项 目 。 


7.1.1 Flash 的 特点 
1. 优化 的 操作 界面 


Flash 的 操作 界面 经 过 重新 设计 ,界面 更 美观 ,层次 更 清晰 ,各 面板 布局 更 合理 。 相 对 
于 其 他 制作 动作 的 程序 ,Flash 更 加 容易 操作 ,无 须 任 何 编程 基础 就 可 以 轻松 制作 出 动画 
效果 。 


2. 生成 的 动画 文件 可 以 独立 播放 


用 Flash 制作 的 动画 作品 不 仅 可 以 在 线 观看 ,也 可 以 离线 观看 ,并 保留 其 原来 动画 中 的 
各 种 交互 式 操作 功能 。 


3. 流 媒体 动画 


Flash 播放 器 在 下 载 Flash 影片 时 采用 流 媒 体 方式 ,也 就 是 说 ,在 Flash 文件 还 没有 完 
全 下 载 完毕 时 就 播放 动画 , 即 下 载 的 同时 进行 播放 。 


4. 文件 体积 较 小 
由 于 Flash 采用 的 图 像 方式 是 矢量 图 ,生成 的 文件 相对 于 传统 网 页 动画 中 同等 体积 的 
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像素 图 来 说 要 小 很 多 。 
5. 具有 交互 式 作 用 的 多 媒体 影片 
Flash 影片 可 以 通过 ActionScript 脚本 语言 与 使 用 者 进行 交互 式 联系 ,使 用 者 可 以 通过 
键盘 操作 或 鼠标 操作 与 影片 实现 互动 。 
6. ARM 
由 于 其 操作 界面 与 其 他 程序 (如 Office, Photoshop 等 ) 相 似 ,因此 用 户 很 容易 上 手 。 
7.1.2 Flash 的 启动 界面 


打开 Flash CS6 软件 ,其 欢迎 界面 显示 如 图 7. 1 所 示 , 下 面 按 区 域 介绍 各 部 分 功能 。 


ABO 新 建 
PB AR tor Ancros 全 Actonserpt 3.0 1 介绍 Flash » 
PB Actonscript 2.0 
"EG 
$B AR for Ancroit 
D aroos 
D Fosn izes 
ActionScript 文件 


# 
u 


K 
a 
è 


3 me > 
4 RSH 
和 RAZE» 
6. ActionScript » 


EECEEE 


Flesh JavaScript 文件 
Flash 项 中 
ActionScript 3.0 8 


Oc 


ActonScript 30 8E 4 


区 Fesnexcnenge» 5 


使 用 sw 进行 胸 态 图 
形 导 出 


图 7.1 Flash 启动 界面 


1. 从 模板 创建 


在 该 选项 区 的 列表 中 单 击 相 应 的 模板 类 别 选项 , 即 可 弹出 “从 模板 创建 ”对话 框 ,并 自动 
切换 到 所 选 的 模板 类 别 。 


2. 打开 最 近 的 项 目 


在 该 选项 区 中 显示 了 最 近 打 开 过 的 Flash 文档 , 单 击 相 应 的 文档 , 即 可 快速 在 Flash 
CS6 中 打开 该 文档 。 如 果 单 击 “ 更 多 ”选项 , 则 会 弹出 “打开 ”对 话 框 ,可 以 在 该 对 话 框 中 浏览 
到 需要 打开 的 Flash 文档 。 
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3. 相关 资源 


在 该 选项 区 中 提供 了 Flash CS6 相关 资源 的 快速 访问 链接 , 单 击 相 应 的 选项 即 可 在 浏 
览 器 窗口 中 打开 Adobe 官方 网 站 所 提供 的 相关 内 容 介绍 。 


4. 新 建 


在 该 选项 区 的 列表 中 提供 了 Flash CS6 所 支持 的 所 有 文档 类 型 , 单 击 相应 的 文档 类 型 
即 可 自动 创建 默认 设置 的 该 类 型 文档 。 


5. 扩展 


在 该 选项 区 中 提供 了 Flash CS6 的 扩展 选项 , 单 击 Flash Exchange 选项 ,将 自动 在 浏览 
器 窗口 中 打开 Adobe 官方 网 站 的 软件 扩展 页 面 。 


6. 学 习 


在 该 选项 区 中 提供 了 Flash CS6 相关 功能 的 学 习 资 源 , 单 击 相应 的 选项 即 可 在 浏览 器 
窗口 中 打开 Adobe 官方 网 站 所 提供 的 相关 的 内 容 介绍 页 面 

一 般 初学 者 可 以 在 新 建 中 选择 创建 fla 文件, 一 个 fla 文件 就 表示 一 个 Flash 源 文件 ,在 
欢迎 界面 中 选择 新 建 “Flash 文件 (ActionScript 3.0)”. 


7.1.3 Flash CS6 的 工作 区 


Flash 的 用 户 界面 由 几 个 主要 部 分 组 成 ,最 上 方 的 是 主 菜单 栏 。 它 分 类 提供 了 Flash 
CS6 中 所 有 的 操作 命令 。 时 间 轴 和 舞台 位 于 工作 界面 的 中 心 位 置 。 浮 动 面板 和 工具 箱 位 于 
工作 界面 的 最 右边 。 在 工具 箱 中 提供 了 Flash 中 所 有 的 操作 工具 ,如 笔触 颜色 和 填充 颜色 ， 
以 及 工具 的 相应 设置 选项 ,通过 这 些 工具 可 以 在 Flash 中 进行 绘图 .调整 等 相应 的 操作 ,如 
图 7.2 所 示 。 


1. ZAE 


在 菜单 栏 中 分 类 提供 了 Flash CS6 中 所 有 的 操作 命令 ,几乎 所 有 的 可 执行 命令 都 可 在 
这 里 直接 或 间接 地 找到 相应 的 操作 选项 。 

d) “X RA 

“SCPE SEB HRAMI LERA Se JEK. BEE” TA” RA” R 
人 人”“ 导 出 ”命令 “发 布 "“AIR” 设 置 “ActionScript RE” “FT EN” A E WB” 
等 命令 。 

(2)“ 编 辑 ” 菜 单 

在 “编辑 ”菜单 中 提供 了 多 种 作用 于 有 舞台 中 各 种 元 素 的 命令 ,如 “复制 “粘贴 “前 切 ” 
等 。 另 外 在 该 菜单 下 还 提供 了 “首选 参数 ”"“ 自 定义 工具 面板 ”“ 字 体 映射 "及 “快捷 键 ” 的 设 
置 命令 。 

(3)“ 视 图 "菜单 

在 “视图 ”菜单 中 提供 了 用 于 调整 Flash 整个 编辑 环境 的 视图 命令 ,如 “放大 ”、“ 缩 小 ” 
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图 7.2 Flash CS6 编辑 界面 


“标尺 ”"“ 网 格 ” 等 命令 。 

(4) “HAP SE 

在 “插入 ”菜单 中 提供 了 针对 整个 文档 ”的 操作 ,比如 在 文档 中 * 新 建 元 件 "“ 场 景 ”在 
“时 间 轴 ”中 插入 “ 补 间 ”“ 层 ”或 “ 帧 "等 。 

(5)“ 修 改 ” 菜 单 

在 “修改 菜单 中 包括 了 一 系列 对 舞台 中 元 素 的 修改 命令 ,如 "转换 为 元 件 "“ 变 形 ” 等 ， 
还 包括 了 对 文档 的 修改 等 命令 。 

(6)“ 文 本 ”菜单 

在 “文本 ”菜单 中 可 以 执行 与 文本 相关 的 命令 ,如 设置 “字体 ”"“ 样 式 ”“ 大 小 ”“ 字 母 间 
距 ” 等 。 

(7)“ 命 令 ” 菜 单 

Flash CS6 允许 用 户 使 用 JSFL 文件 创建 自己 的 命令 ,在 “命令 ”菜单 中 可 运行 ,管理 这 
些 命令 或 使 用 Flash 默认 提供 的 命令 。 

(8)“ 控 制 ?菜单 

在 “控制 "菜单 中 可 以 选择 “测试 影片 ”或 “测试 场景 ”, 还 可 以 设置 影片 测试 的 环境 , 例 
如 : 用户 可 以 选择 在 桌面 或 移动 设备 中 测试 影片 。 

(9)“ 调 试 ”菜单 

在 “调试 "菜单 中 提供 了 影片 调试 的 相关 命令 ,如 设置 影片 调试 的 环境 等 。 

(10)“ 窗 口 "菜单 

在 “窗口 "菜单 中 主要 集合 了 Flash 中 的 面板 激活 命令 ,选择 一 个 要 激活 的 面板 的 名 称 
即 可 打开 该 面板 。 
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(11)“ 帮 助 ” 菜 单 
在 “帮助 "菜单 中 含有 Flash 官方 帮助 文档 ,也 可 以 选择 “关于 Adobe Flash Professional” 
来 了 解 当前 Flash 的 版 权 信息 。 


2. 基本 功能 


Flash CS6 提供 了 多 种 软件 工作 区 预 设 ,在 该 选项 的 下 拉 列 表 | 
中 可 以 选择 相应 的 工作 区 预 设 ,选择 不 同 的 选项 , 即 可 将 Flash CS6 BAR 
的 工作 区 更 改 为 所 选择 的 工作 区 预 设 。 在 列表 的 最 后 提供 了 “ 重 置 meee 
基本 功能 *"“ 新 建 工 作 区 ”“ 管 理工 作 区 ”3 种 功能 ,“ 重 置 基 本 功 pn 
能 ”用 于 恢复 工作 区 的 默认 状态 ,新建 工作 区 ”用 于 创建 个 人 喜好 重生 基本 功能 (R) 
的 工作 区 配置 ,管理 工作 区 ”用 于 管理 个 人 创建 的 工作 区 配置 ,并 EL 
可 执行 重 命名 或 删除 操作 ,如 图 7. 3 所 示 。 


3.“ 文 档 窗口 "选项 卡 


在 “文档 窗口 ”选项 卡 中 可 显示 文档 名 称 , 当 用 户 对 文档 进行 修改 而 未 保存 时 , 则 会 显示 
“x* ”号 作为 标记 。 如 果 在 Flash CS6 软件 中 同时 打开 了 多 个 Flash 文档 ,可 以 单 击 相应 的 
文档 窗口 选项 卡 进行 切换 。 


4, BRIE 


该 选项 提供 了 对 Flash 中 功能 选项 的 搜索 功能 ,在 该 文本 框 中 输入 需要 搜索 的 内 容 , 再 
按 Enter 键 即 可 。 


5. 编辑 栏 


左 侧 显示 当前 “场景 或“ 元件”, 单 击 右 侧 的 “编辑 场景 "按钮 ,在 弹出 的 菜单 中 可 以 选择 
要 编辑 的 场景 。 单 击 旁边 的 “编辑 元 件 ” 按 钮 ,在 弹出 的 菜单 中 可 以 选择 要 切换 编辑 的 元 件 。 
如 果 希 望 在 Flash 工作 界面 中 设置 显示 /隐藏 该 栏 , 则 可 以 执行 “窗口 ”一 工具 栏 " 一 “编辑 
栏 ” 命 令 , 即 可 在 Flash CS6 工作 界面 中 设置 显示 /隐藏 该 栏 。 


6. 舞台 


台 是 用 户 在 创建 Flash 文件 时 放置 图 形 内 容 的 区 域 , 这 些 图 形 内 容 包 括 矢 量 插图 、 文 
本 框 、 按 钮 .导入 的 位 置 或 者 视频 等 。 如 果 需 要 在 舞台 中 定位 项 目 , 可 以 借助 网 格 .辅助 线 和 
标尺 。Flash 工作 界面 中 的 舞台 相当 于 Flash Player 或 Web 浏览 器 窗口 中 在 播放 Flash 动 
画 时 显示 Flash 文件 的 矩形 空间 。 


加 


图 7.3 下 拉 列 表 


7.“ 时 间 轴 ”面板 


时 间 轴 用 于 组 织 和 控制 文档 内 容 在 一 定时 间 内 播放 的 图 层 数 和 帧 数 。 与 胶片 一 样 ， 
Flash 文件 也 将 时 长 分 为 帧 。 图 层 就 像 是 堆 和 在 一 起 的 多 张 幻 灯 片 , 每 个 图 层 都 包含 一 个 
显示 在 舞台 中 的 不 同 图 像 。 时 间 轴 的 主要 组 件 就 是 图 层 、 帧 和 播放 头 。 
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8. 浮动 面板 
浮动 面板 用 于 配合 场景 .元 件 的 编辑 和 Flash 的 功能 设置 ,在 “窗口 "菜单 中 执行 相应 的 
命令 ,可 以 在 Flash CS6 的 工作 界面 中 显示 /隐藏 相应 的 面板 。 


9. 工具 箱 


在 工具 箱 中 提供 了 Flash 中 所 有 的 操作 工具 ,如 笔触 颜色 和 填充 颜色 ,以 及 工具 的 相应 
设置 选项 ,通过 这 些 工具 可 以 在 Flash 中 进行 绘图 ,调整 等 相应 的 操作 ,如 图 7.4 所 示 。 
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A 3D 平 移 工具 (G6) 
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O waa) 
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Q MELA (0) 
E BAHIA) 
2 ESWAIA0) 
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(4) "Ò WRIA) 


AP SLA) 
Q elm) 
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(6) 


图 7.4 工具 箱 


(1) 选择 变换 工具 
工具 箱 中 的 选择 变换 工具 包括 了 “部 分 选择 工具 ”“ 套 索 工具 ”、“ 任 意 变形 工具 ”和 “ 渐 
变 变 形 工具 ”, 利 用 这 些 工具 可 对 舞台 中 的 元 素 进 行 选择 、 变 换 等 操作 。 

(2) 绘画 工具 

绘画 工具 包括 “钢笔 工具 组 ”“ 文 本 工具 ”“ 线 条 工具 ?"“ 和 矩形 工具 组 ”"“ 铅 笔 工 具 ”、 
“刷子 工具 组 ”以 及 “Deco TA” ,这些 工具 的 组 合 使 用 能 让 设计 者 更 方便 地 绘制 出 理想 的 


作品 。 
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(3) 绘画 调整 工具 

该 组 工具 能 让 设计 者 对 所 绘制 的 图 形 、. 元 件 的 颜色 等 进行 调整 , 它 包 括 * 骨 骼 工具 组 ”、 
“颜料 桶 工具 组 ”“ 滴 管 工具 ”“ 橡 皮 擦 工具 ”。 

(4) 视图 工具 

视图 工具 中 含有 “ 手 形 工具 ”用 于 调整 视图 区 域 ,“ 缩 放 工 具 ” 用 于 放大 /缩小 舞台 大 小 。 

(5) 颜色 工具 

颜色 工具 主要 用 于 “笔触 颜色 ”和 “填充 颜色 ”的 设置 和 切换 。 

(6) 工具 选项 区 

工具 选项 区 是 动态 区 域 , 它 会 随 着 用 户 选 择 的 工具 的 不 同 而 显示 不 同 的 选项 ,如 果 单 击 
工具 箱 中 的 “ 套 索 工具 ”按钮 , 单 击 “ 魔 术 棒 ”按钮 , 则 切换 “ 套 索 工具 ”为 “魔术 棒 工 具 ”, 单 击 
“魔术 棒 设置 "按钮 ,用 于 设置 “魔术 棒 ” 的 相关 参数 。 


¢.2 Flash 的 基本 概念 与 操作 


7.2.1 Flash 的 基本 概念 
1. 帧 


在 Flash 中 , 帧 是 进行 flash 动画 制作 的 最 基本 单位 , 它 装 载 了 Flash 播放 的 内 容 。 在 
时 间 轴 上 的 每 一 帧 都 可 以 包含 需要 显示 的 所 有 内 容 , 包 括 图 形 声音、 各 种 素材 和 其 他 多 种 
对 象 。 

时 间 轴 中 有 很 多 单元 格 ,每 一 个 横行 代表 一 个 层 , 层 内 的 每 一 个 小 单元 格 表示 一 帧 。 帧 
是 创建 动画 的 基本 单位 。 在 Flash 中 包含 有 几 种 类 型 的 帧 ,它们 是 : 关键 帧 .空白 关键 帧 和 
过 渡 帧 。 

d) 空白 关键 帧 

空白 关键 帧 是 关键 帧 的 一 种 , 它 什 么 内 容 都 没有 。 启 动 Flash 后 ,在 默认 状态 下 ,每 个 
层 的 第 一 帧 都 是 空白 关键 帧 。 在 动画 制作 工作 区 中 添加 了 内 容 后 , 它 自 动 变 成 关键 帧 。 

默认 的 新 建文 件 会 含有 一 个 空白 关键 帧 ,空白 关键 帧 在 时 间 轴 上 显示 为 没有 标志 的 空 
心 单 元 格 ,如 图 7.5 所 示 。 


E | Sues 


Peo 会 | 


E 
| 中 
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- 
Ei 
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(2) 关键 帧 

关键 帧 是 决定 一 段 动 画 的 必要 帧 , 它 含 有 关键 内 容 。 在 其 中 可 以 放置 图 形 ,播放 对 象 ， 
并 可 以 对 所 包含 的 内 容 进 行 编 辑 。 关 键 帧 一 般 放 在 动画 开始 点 、 控 制 转折 点 或 结束 点 。 在 
空白 关键 帧 中 添加 了 内 容 后 就 变 成 了 关键 帧 ,在 时 间 轴 中 包含 内 容 的 关键 帧 显示 为 有 黑色 
实心 圆 点 的 单元 格 ,如 图 7.6 所 示 。 

G) 过 渡 帧 

在 两 个 关键 帧 中 间 的 普通 帧 称 为 过 渡 帧 。 在 Flash 中 ,确定 了 两 段 的 关键 帧 后 ,利用 命 
令 可 以 自动 计算 添加 过 渡 帧 ,无 须 人 工 添加 。 

过 渡 帧 的 显示 状态 与 过 渡 方式 有 关 , 如 果 是 运动 渐变 过 渡 ,过 渡 帧 就 显示 为 带 有 箭头 直 
线段 的 浅 紫色 单元 格 , 如 图 7.7 所 示 。 


图 7.6 关键 帧 图 7.7 运动 渐变 过 渡 


如 果 是 形状 渐变 过 滤 ,过 渡 帧 就 显示 为 带 有 箭头 直线 段 的 浅 绿色 单元 格 , 如 图 7.8 
所 示 。 

如 果 没 有 按照 要 求 准备 好 过 渡 条 件 就 过 渡 , 就 会 出 现 错误 ,出 错时 的 过 渡 帧 如 图 7. 9 所 
示 , 是 虚线 的 单元 格 。 


图 7.8 形状 渐变 过 渡 图 7.9 出 错 


2.8 


+j Photoshop 相同 ,在 Flash 中 , 层 也 好 比 一 张 “透明 纸 "。 首 先 需 要 在 一 张 透明 的 纸 上 
画 一 些 图 形 , 写 一 些 文字 ,然后 将 多 层 * 透 明 纸 ” 按 一 定 的 顺序 进行 至 加 ,就 实现 最 终 的 效果 
了 , 层 在 时 间 轴 窗口 中 就 是 一 个 横行 , 它 包含 着 若干 个 帧 。 

Flash 软件 的 图 层 位 于 时 间 轴 面板 的 左 侧 , 其 结构 如 图 7. 10 示 。 在 最 顶层 的 对 象 将 始 
终 显示 于 最 上 方 , 图 层 的 排列 顺序 决定 了 有 舞台 中 对 象 的 显示 情况 。 在 舞台 中 每 个 层 的 对 象 
可 以 设置 任意 数量 ,如 果 时 间 轴 面板 中 图 层 的 数量 过 多 的 话 , 可 以 通过 上 下 拖 动 右 侧 的 滑动 
条 观察 被 隐藏 的 图 层 。 

在 Flash 中 ,分 为 普通 层 . 运 动 引 导 层 、 遮 罩 层 和 注释 说 明 层 4 种 层 。 通 常 建立 的 层 都 
是 普通 层 ; 通过 运动 引导 建立 的 层 是 引导 层 , 它 的 作用 是 提供 引导 线 作 为 被 引导 层 中 对 象 
的 运动 轨迹 ; 遗 罩 层 是 通过 设 定 遮 罩 关 系 建 立 的 层 , 它 的 作用 是 为 了 实现 遮 罩 关系 下 的 特 
别 效果 ; 在 注释 说 明 层 中 可 以 添加 一 些 说 明 性 文字 ,输出 时 不 输出 该 层 内 容 。 
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图 7.10 图 层 


在 Flash 中 任何 被 选中 的 东西 ,都 可 以 叫做 对 象 。 对 象 被 选中 后 ,可 以 通过 设置 实现 用 
户 要 求 的 变形 或 运动 。 如 果 绘 制 了 一 个 圆 ,并 选中 这 个 圆 的 话 , 它 就 是 一 个 对 象 ,可 以 通过 
工具 对 它 进 行 填充 修改、 移动 .变形 等 编辑 。 

用 户 通 过 工具 箱 中 的 工具 直接 绘制 的 对 象 称 为 独立 对 象 ; 如 果 用 户 选中 了 这 些 对 象 ， 
利用 “组 合 ” 命 令 形成 了 一 个 新 的 对 象 , 称 为 组 合 对 象 ; 其 中 的 各 个 独立 对 象 组 成 群 组 对 象 
的 基本 对 象 , 称 为 子 对 象 。 


4. T SKB E 


元 件 也 称 为 符号 或 图 符 ,就 是 将 某 段 Flash 剪辑 、 导 入 的 视频 、 动 画 或 图 片 等 作为 一 个 
整体 存放 在 元 件 库 中 ,事后 可 将 其 拖 放 到 舞台 被 使 用 。Flash 中 包含 3 种 元 件 类 型 ,分 别 为 
图 形 元 件 .影片 剪辑 元 件 和 按钮 元 件 。 元 件 是 Flash 动画 的 重要 组 成 部 分 。 元 件 的 主要 特 
性 是 可 以 被 重复 利用 。Flash 中 的 所 有 元 件 都 被 归纳 在 库 面板 中 ,可 以 被 随时 调用 ,十 分 方 
便 。 即 便 在 场景 中 将 所 有 元 件 全 部 删除 掉 , 也 不 会 影响 库 面 板 中 的 元 件 。 每 个 元 件 都 具有 
独立 的 时 间 轴 工作 区 和 层 , 除 此 之 外 ,每 种 元 件 类 型 都 具有 独特 的 属性 ,只 有 了 解 三 种 元 件 
类 型 的 特性 ,才能 使 元 件 的 作用 得 到 充分 的 发 挥 。 

创建 元 件 一 般 有 两 种 方法 ,一 种 方法 是 将 舞台 上 的 选 定 对 象 转换 为 元 件 。 另 一 种 方法 
是 创建 一 个 空白 元 件 , 然 后 绘制 或 导入 需要 的 对 象 。 元 件 的 创建 方法 在 后 面 的 实例 中 再 详 
细 说 明 。 

在 Flash 中 创建 的 所 有 元 件 都 会 出 现在 库 面板 中 , 拖 奥 库 面板 中 的 元 件 到 场景 中 ,可 以 
反复 利用 元 件 。 应 用 于 影片 的 元 件 被 称 做 “实例 ”。 在 工作 区 中 选中 实例 ,通过 元 件 属性 面 
板 中 的 设置 ,可 以 改变 实例 的 尺寸 .颜色 与 元 件 类 型 ,但 这 些 改动 只 针对 实例 本 身 ,不 会 影响 
到 库 面 板 中 的 元 件 。 

Flash 文档 的 库 中 存储 了 用 户 创建 或 导入 的 媒体 资源 。 库 是 Flash 组 织 编辑 和 管理 动 
画 中 创建 和 使 用 的 各 种 元 件 的 仓库 。 所 有 元 件 都 会 被 自动 载 和 到 当前 影片 的 库 面板 中 ,以 
便 以 后 灵活 调用 。 另 外 ,还 可 以 从 其 他 影片 的 库 面 板 中 调用 元 件 ,或 者 根据 需要 建立 自己 
的 库 。 
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7.2.2 动画 的 基本 概念 
1. 计算 机 动画 的 概念 与 原理 
所 谓 动画 ,简单 地 说 ,就 是 将 静止 状态 下 的 一 幅 幅 图 画 或 照片 连续 地 演播 出 来 的 技术 ， 


具体 来 说 又 有 以 下 两 种 说 法 : 

(1) 动画 是 一 种 通过 一 系列 连续 的 画面 来 显示 运动 的 技术 ,是 以 一 定 的 播放 速度 来 达 
到 连续 运动 的 效果 的 ; 

(2) 动画 是 一 系列 具有 各 种 物体 的 动态 画面 的 处 理 过 程 ,每 一 个 画面 都 可 以 与 前 一 个 
画面 有 着 微小 的 变化 。 


这 两 种 不 同 的 说 法 ,从 不 同 的 角度 阐述 了 动画 的 一 些 特性 一 一 连续 性 、 运 动 性 ,以 及 是 
由 有 微小 差别 的 多 个 画面 组 成 的 等 特性 。 

动画 的 概念 已 经 明确 ,原理 就 自然 清楚 了 一 一 人 的 “视觉 原理 ”。 医 学 证 明 , 人 类 的 视觉 
系统 有 视觉 暂 留 的 特性 ,也 就 是 说 ,人 的 眼睛 看 到 图 像 后 的 1/24s 内 ,图 像 不 会 从 大 脑 中 消 
失 。 利 用 这 一 原理 ,如 果 在 前 一 图 像 没有 消失 之 前 ,播放 下 一 图 像 ,就 会 给 人 造成 一 种 连续 
变化 的 视觉 效果 。 电 影 .电视 都 是 利用 了 这 一 原理 。 


2. 计算 机 动画 的 分 类 


近年 来 ,涌现 出 许多 计算 机 动画 系统 ,它们 的 方式 \ 目 的 、 特 点 各 不 相同 。 对 这 些 系 统 进 
行 大 致 的 分 类 如 下 。 

(1) 按 计算 机 在 动画 制作 中 的 作用 分 类 

按 计算 机 在 动画 制作 中 的 作用 分 类 ,可 将 计算 机 动画 系统 分 为 两 类 : 计算 机 辅助 动画 
和 造型 动画 。 前 者 属于 二 维 动画 ,其 主要 用 途 是 辅助 动画 师 们 制作 类 似 于 传统 动画 的 动画 ， 
以 及 对 各 类 动画 片段 的 编辑 (合成 .连接 ) 等 后 期 制作 。 后 者 属于 三 维 动画 ,用 来 绘制 和 控制 
在 三 维 空间 中 运动 的 物体 。 

(2) 按 运动 的 控制 方式 分 类 

根据 运动 的 控制 方式 不 同 , 可 将 计算 机 动画 分 为 关键 帧 动画 和 算法 动画 。 关 键 帧 动画 
通过 对 关键 画面 的 控制 来 获得 中 间 画 面 的 动画 序列 ,算法 动画 则 采用 算法 实现 对 物体 的 运 
动 控 制 或 模拟 摄像 机 的 运动 控制 。 

(3) 从 制作 原理 上 分 类 

从 制作 原理 上 分 类 ,动画 可 简单 划分 为 两 大 类 : 逐 帧 动画 和 补 间 动画 。 

逐 帧 动画 就 是 通过 更 改 每 一 帧 中 的 舞台 内 容 而 获得 动画 效果 , 它 最 适合 于 每 一 帧 中 的 
图 像 都 在 改变 ,而 不 是 仅仅 简单 地 在 舞台 中 移动 的 复杂 动画 。 逐 帧 动画 的 缺点 是 太 耗 费时 
间 和 精力 ,而 且 最 终生 成 的 动画 文件 偏 大 。 但是, 它 也 有 自己 的 优点 , 即 能 最 大 限度 地 控制 
动画 的 变化 细节 。 

补 间 动画 是 在 两 个 关键 帧 之 间 建 立 渐 变 的 一 种 动画 。 补 间 动 画 关键 帧 的 对 象 是 元 件 的 
实例 、 群 组 体 或 文字 。 补 间 动 画 的 原理 是 : 在 第 一 个 关键 帧 中 设置 元 件 实例 、 群 组 体 或 文字 
的 属性 ,然后 在 第 二 个 关键 帧 中 修改 对 象 的 属性 ,从 而 在 两 帧 之 间 产 生动 画 效果 。 可 以 修改 
的 属性 包括 大 小 、 颜 色 , 旋 转 和 倾斜 ,位 置 、 透 明度 及 各 种 属性 的 组 合 。 
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3. Flash 动画 的 格式 


在 制作 Flash 动画 之 前 ,首先 了 解 一 下 Flash 动画 的 几 种 常见 的 格式 。 

(1) Flash 源 文件 格式 

Flash 源 文 件 格式 的 扩展 名 为 . fla, 该 类 型 文件 只 能 在 Flash 应 用 程序 中 被 打开 和 编辑 ， 
在 其 他 软件 中 是 无 法 打开 的 。 用 户 可 以 在 Flash 应 用 程序 中 打开 该 文件 ,然后 导出 扩展 名 
为 swf 或 swt 的 文件 ,以 便 在 浏览 器 中 使 用 。 

(2) Flash 电影 文件 格式 

Flash 电影 文件 格式 的 扩展 名 为 swf。 该 类 型 文件 是 由 电影 文件 格式 源 文 件 压 缩 生 成 
的 文件 ,为 方便 在 网 络 中 查看 ,已 对 其 进行 了 优化 处 理 。 因 此 ,这 种 类 型 的 文件 可 以 在 浏览 
器 中 播放 ,但 是 要 求 浏览 器 安装 Flash Player 播放 器 插件 后 才能 播放 ,也 可 以 在 
Dreamweaver 中 预览 ,但 是 不 能 在 Flash 应 用 程序 中 编辑 。 另 外 ,在 Dreamweaver 中 允许 
用 户 直 接 插入 Flash 动画 对 象 ,该 对 象 的 扩展 名 为 swf。 


7.3 动画 制作 


Flash 提供 了 两 种 创建 动画 的 方式 ,它们 是 逐 帧 动画 与 补 间 动画 。 其 中 , 补 间 动 画 又 可 
以 分 为 运动 渐变 动画 和 形状 渐变 动画 两 种 。 制 作 动 画 时 ,用 户 可 以 轻松 地 使 对 象 在 场景 中 
来 回 地 运动 ,在 运动 的 过 程 中 还 可 以 伴随 有 诸如 放大 、 缩 小 .旋转 、 变 色 及 淡 入 淡出 等 丰富 
效果 。 


7.3.1 逐 帧 动画 的 制作 


逐 帧 动画 的 制作 方法 与 传统 的 动画 相似 ,将 对 象 的 运动 过 程 分 解 成 多 个 静态 图 形 ,再 将 
这 些 连续 的 静态 图 形 置 于 连续 的 关键 帧 中 ,就 构成 了 逐 帧 动画 。 

由 于 其 中 的 每 一 帧 都 是 关键 帧 ,所 以 生成 的 影片 相对 较 大 , 仅 适用 于 制作 较为 精细 复杂 
的 小 动画 。 

例 7.1 制作 小 马 快 跑 的 动画 效果 。 

本 实例 需要 准备 8 个 大 小 相同 的 图 像 文件 ,文件 名 分 别 是 1. gif，2. gif,…,8. gif, 如 
图 7.11 所 示 。 

制作 过 程 如 下 。 

a) 创建 影片 文档 

执行 “文件 ”~ 新建” 命令 ,在 弹出 的 对 话 框 中 选择 *Flash 文档 ”选项 后 , 单 击 “ 确 定 ” 按 
钮 ,新 建 一 个 影片 文档 。 在 “文档 属性 ”对 话 框 中 进行 设置 ,文件 大 小 为 150X170 像素 ,背景 
色 为 白色 ,如 图 7.12 所 示 。 

(2) 修改 图 层 名 称 

双击 “图 层 1” 的 图 层 名 称 , 将 其 修改 为 “小 马 ”, 如 图 7. 13 所 示 。 

(3) 导入 小 马 图 片 

单 击 此 层 第 一 帧 ,执行 “文件 ”>“ 导 人 ”一 “导入 到 上 舞台 ”命令 ,弹出 如 图 7. 14 所 示 的 对 
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图 7.11 逐 帧 动画 制作 
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图 7.12 创建 影片 文档 
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7.13 修改 图 层 名 称 


话 框 ,将 素材 中 的 系列 小 马 图 片 导入 。 

在 图 7. 15 选择 “是 ”按钮 ,Flash 会 自动 把 该 文件 夹 中 的 图 片 按 序号 导入 到 场景 中 。 导 
入 后 ,动画 序列 Flash 自动 分 配 在 8 个 关键 帧 中 ,如 图 7. 16 所 示 。 

也 可 以 手动 插入 图 片 ,在 第 8 帧 处 单 击 鼠 标 右键 选择 插入 关键 帧 ,再 将 需要 插入 的 图 片 
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图 7.14 导入 小 马 图 片 
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图 7.15 导入 图 片 


导入 至 舞台 ,在 第 8 帧 处 单 击 鼠 标 右键 在 选项 卡 中 选择 “插入 关键 帧 ” 即 可 。 

(4) 测试 存盘 

执行 “控制 >“ 测试 影片 ”命令 ,观察 动画 效果 。 如 果 满 意 ,执行 “文件 ”一 “保存 ”命令 ， 
将 文件 保存 成 horse. fla 文件 。 如 果 要 导出 Flash 播放 文件 ,执行 “文件 ”一 “导出 ”>“ 导 出 
影片 ”命令 即 可 。 


7.3.2 运动 渐变 动画 的 制作 


运动 渐变 动画 是 补 间 动 画 的 一 种 。 通 过 为 对 象 创建 运动 渐变 ,可 以 改变 对 象 的 位 置 、 大 
小 .旋转 或 倾斜 ,做 出 物体 运动 的 各 种 效果 。 通 过 设置 实例 的 颜色 属性 ,还 可 以 制作 出 丰富 
的 渐变 效果 ,例如 ,实例 的 淡 入 淡出 效果 。 
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图 7.16 小 马 系列 图 片 导 入 


要 正确 运用 运动 渐变 必须 满足 以 下 创作 条 件 : 

(1) 运动 渐变 只 能 作用 于 元 件 实例 ,要 对 形状 .组 合 、 位 图 或 文本 对 象 应 用 运动 渐变 , 必 
须 先 将 这 些 对 象 转换 为 元 件 ; 

(2) 运动 渐变 中 的 元 件 只 能 是 一 对 一 的 渐变 ,多 对 一 或 一 对 多 均 会 导致 渐变 失败 ; 

(3) 运动 渐变 中 的 元 件 只 能 在 同一 图 层 中 。 

例 7.2 使 用 运动 渐变 动画 实现 文字 被 风 吹 走 的 效果 。 

制作 过 程 如 下 。 

(1) 创建 影片 文档 

执行 “文件 ”一 “新建 "命令 ,在 弹出 的 对 话 框 中 选择 “Flash 文档 ”选项 后 , 单 击 “ 确 定 ” 按 
钮 ,新 建 一 个 影片 文档 。 在 “文档 属性 ”对 话 框 中 进行 设置 : 文件 大 小 为 550X350 RAY 
景 颜色 为 #3333cc。 

(2) 创建 元 件 

在 制作 本 实例 动画 之 前 ,应 当先 掌握 元 件 和 库 的 基本 操作 。 

创建 元 件 的 方法 主要 两 种 方法 : 

第 一 种 方法 是 直接 创建 一 个 空白 元 件 , 然 后 自动 进入 元 件 编辑 模式 ,接着 在 元 件 中 创建 
和 编辑 元 件 中 的 对 象 。 单 击 菜单 栏 中 的 “插入 ”选择 “新 建 元 件 ”, 再 在 对 话 框 中 设置 元 件 的 
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名 称 ,选择 元 件 的 类 型 ,最 后 单 击 “确定 ”按钮 。 
第 二 种 方式 是 将 对 象 转换 为 元 件 。 将 选 定 的 对 象 转换 为 元 件 , 右 击 选 定 的 对 象 ,弹出 快 
捷 菜 单 。 对 象 可 以 为 任何 元 素 , 将 对 象 转换 为 元 件 后 , 即 可 改变 对 象 的 属性 。 
创建 的 元 件 会 自动 加 入 到 库 中 ,执行 “窗口 >“ 库 ” 命 令 或 按 Ctrl 十 L 快捷 键 , 即 可 打开 
库 面 板 , 如 图 7.17 所 示 。 


图 7.17 库 
库 面 的 基本 操作 包括 以 下 4 种。 
D 新 建 元 件 
单 击 库 面板 左下 角 的 “新 建 元 件 ” 按 钮 , 即 可 开始 新 建 元 件 。 
@ 新 建文 件 夹 


为 了 便于 管理 ,经 常 把 一 批 相关 的 元 件 放 在 一 个 组 内 。 单 击 “ 新 建文 件 夹 "按钮 ,出 现 新 
文件 夹 , 填 入 文件 夹 名 称 ,确定 后 完成 新 建文 件 夹 。 

@ 属性 的 修改 

选中 库 面板 中 的 元 件 , 单 击 “ 属 性 ”按钮 , 即 可 修改 和 调整 元 件 的 属性 。 

@ 删除 元 件 

选中 库 面板 中 的 元 件 或 文件 夹 , 单 击 “ 删 除 ” 按 钮 ,弹出 “删除 ”对 话 框 ,提示 删除 后 无 法 
撤销 。 如 果 单 击 “ 删 除 ” 按 钮 , 即 可 实现 永久 删除 。 

在 本 实例 中 ,因为 每 一 个 字 都 要 单独 做 动画 ,所 以 必须 把 每 个 字 单 独 做 成 一 个 元 件 , 然 
后 分 别 放 在 不 同 的 层 上 。 

选择 文字 工具 ,在 属性 面板 中 设置 文字 的 字体 为 华文 楷体 ,大 小 为 80, 颜色 为 
# cc6699, 在 场景 中 输入 “ 欢 ”, 然 后 选中 输入 的 “ 欢 ” 字 , 按 F8 键 将 其 转换 为 元 件 或 在 “ 欢 ” 字 
上 单 击 鼠标 右键 ,选择 “转换 为 元 件 ”。 

按照 类 似 的 方法 ,分别 输入 " 欢 "“ 迎 ”“ 学 ”"“ 习 ”Flash ,并 分 别 将 它们 转化 为 元 件 。 

(3) 将 元 件 分 布 到 各 个 图 层 中 并 设置 对 其 方式 

元 件 制 作 完毕 后 ,在 时 间 轴 窗口 新 建 5 个 图 层 ,使 层 的 总 数 变 为 5 个 。 按 Ctrl 十 L 键 打 
开 库 面板 ,在 最 上 面 一 层 , 把 “ 欢 ” 字 拖 到 主场 景 中 ,并 改变 图 层 的 名 字 为 “ 欢 ”。 在 第 二 层 把 
“ 迎 ”" 字 拖 到 主场 景 中 ,并 改变 图 层 的 名 字 为 “ 迎 ”。 其 余 类 推 ,把 这 5 个 字 分 别 放 在 不 同 的 层 
上 ,注意 ,在 最 下 面 的 图 层 Flash 中 只 保留 文字 Flash 的 元 件 ,将 其 他 元 件 删除 即 可 ,如 
图 7.18 所 示 。 
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然后 用 箭头 工具 框 选 所 有 文字 , 按 Ctrl 十 K 键 打 开 对 齐 面板 ,设置 对 象 的 对齐” 为 垂直 
方向 底 对 齐 ,“ 分 布 ” 为 水 平 居 中 分 布 ,“ 相 对 于 舞台 ”为 相对 于 有 舞台 分 布 。 

(4) 设置 文字 的 缩放 和 颜色 变化 

本 实例 中 的 文字 变化 是 通过 改变 实例 颜色 样式 的 方法 实现 的 。 设 置 如 下 : 利用 属性 面 
板 中 “色彩 效果 ”选项 的 设置 ,改变 实例 的 颜色 ,如 图 7. 19 所 示 。 


图 7.18 各 个 图 层 图 7.19 色彩 效果 


在 工作 区 中 选中 元 件 的 实例 ,从 “色彩 效果 ”下 拉 列 表 中 进行 选择 ,其 中 包括 以 下 5 种 颜 
色 样 式 。 

D 无 : 默认 设置 ,表示 不 为 实例 设置 颜色 效果 。 

© 亮度 : 用 于 设置 实例 的 亮度 。 

@ 色调 : 用 于 设置 实例 的 色彩 倾向 。 

@ Alpha: 用 于 设置 实例 的 透明 度 。 

© 高 级 : 用 于 同时 设置 实例 的 色调 与 透明 度 。 

在 最 上 面 一 层 的 第 20 帧 按 Fo 键 插入 关键 帧 ,在 * 欢 ” 字 上 单 击 鼠标 右键 ,从 快捷 菜单 
中 选择 “任意 变形 ”命令 ,文字 四 周 出 现 8 个 黑色 小 方 框 , 单 击 选中 文字 左边 中 间 的 那个 小 方 
点 ,然后 向 右 拖 动 ,使 文字 横向 压缩 直到 翻转 ,如 图 7. 20 所 示 。 

完成 后 在 “ 欢 ” 字 上 单 击 , 在 属性 面板 中 将 演 样式 设置 为 Alpha, 其 值 设 置 为 0%。 

(5) 创建 运动 渐变 动画 

把 “ 欢 ” 字 移 到 场景 右上 角 , 选中 第 1 帧 ,设置 “ 补 间 ” 为 “动画 ”,“ 缓 动 ”为 一 100, 如 
图 7.21 所 示 。 

这 样 ,这 个 字 在 1 一 20 帧 之 间 会 由 左下 向 右上 方 加速 移 动 ,在 移动 的 过 程 中 形状 不 断 压 
缩 直 到 翻转 ,颜色 也 逐渐 变 淡 直 至 消失 。 

其 他 层 的 操作 也 是 一 样 ,因为 每 个 文字 起 动 的 时 间 不 一 样 ,所 以 我 们 可 以 对 每 个 字 稍微 
做 些 调整 。 在 “ 迎 ” 层 的 第 3 帧 和 第 23 帧 分 别 按 F6 键 插入 关键 帧 ,在 第 23 帧 把 “ 迎 ” 字 也 做 
压缩 翻转 及 设置 Alpha 值 的 处 理 , 并 拖 到 和 “ 欢 ” 字 一 样 的 位 置 ,设置 第 3 帧 为 运动 渐变 。 这 
样 “ 迎 ” 字 将 比 “ 欢 ” 字 晚 3 帧 起 动 。 其 他 文字 用 一 样 的 方法 , 均 比 前 一 个 字 晚 3 帧 起 动 , 压 缩 
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和 颜色 渐变 等 的 设置 方法 一 样 。 


| B 


图 7.20 文字 翻转 图 7.21 设置 缓 动 


最 终 做 好 的 时 间 轴 窗口 如 图 7.22 所 示 。 


图 7.22 时 间 轴 窗口 


做 好 风 吹 动 文 字 的 动画 ,选择 菜单 栏 中 “控制 ”测试 影片 ”命令 来 测试 该 动画 效果 ,如 
图 7.23 所 示 。 


外 A 
NF 习 Flash 
图 7.23 动画 效果 
7.3.3 Se BIE 
1. T4288 


HE BE oh i Zz Flash KY — PPE AS iam Hr SK ctl PEE E ym E > ag BEY + Pd Jo « BDSG Jk A 
BOE SEY. PERN Vial fh. fiz E E K E Je BER a E a P AI ER TB — 
PE FALE BY SEG DK BY eB a PP Jy DS MAE A BY A SE K Sa 
FEAR i AY «CSE E a TE E X R h BY Pd HG AR TL. EAE E a p, “GE Bn” — 
个 ,被 遮 罩 层 " 可 以 有 任意 个 。 
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2. RAHAA 


遮 旱 主要 有 两 种 用 途 , 一 个 作用 是 用 在 整个 场景 或 一 个 特定 区 域 ,使 场景 外 的 对 象 或 特 
定 区 域外 的 对 象 不 可 见 ; 另 一 个 作用 是 用 来 遮 罩 住 某 一 元 件 的 一 部 分 ,从 而 实现 一 些 特殊 
的 效果 。 


3. HRB 


(1) 创建 让 站 

在 Flash 中 没有 一 个 专门 的 按钮 来 创建 庶 黑 , 庶 蛙 层 其 实 是 由 普通 图 层 转化 过 来 的 。 

在 某 hav 上 P i Ri 右键 ,在 弹出 的 菜单 中 把 PTAH ,该 图 层 就 会 生成 遮 单 
hE AG 图 标 ， 会 自动 把 遮 置 层 下 面 的 一 层 关 联 为 

,只 要 把 这 些 层 拖 到 被 诞 罩 层 下 面 就 行 了 。 


只 要 


(2) ey HARE E FAL BR SE 的 元 素 
遮 音 层 中 的 图 形 对 象 在 播放 时 是 看 不 到 的 , 遮 单 层 中 的 内 容 可 以 是 按钮 .影片 剪辑 
形 .位 图 .文字 等 ,但 不 能 使 用 线条 ,如 果 一 定 要 用 线条 ,可 以 将 线条 转化 为 “填充 ” 
层 中 的 对 象 EP AY RRMA TERK Z s AY DE HFR LI 


剪辑 .图 形 、 


.3 制作 一 个 动画 ,产生 文字 在 探照灯 照射 下 逐步 显示 出 来 的 效果 。 
步 : 新 建 一 个 动画 文件 ,将 第 一 个 图 层 的 名 字 改 为 “文字 ” 

第 二 步 : 单 击 菜单 “修改 ”>“ 文 档 ” ,设置 背景 色 为 黑色 。 在 “文字 ” 层 的 第 1 帧 输入 “ 欢 
迎 光 临 ” 在 15 帧 处 插入 帧 ,将 第 一 帧 延伸 至 第 15 帧 ,如 图 7.24 所 示 。 


欢迎 光临 


Web 前 端 设计 一 一 HTML+CSS+jQuery 技 术 教 程 


图 


间 动 画 ”。 


图 7.25 新 建 元 件 E 


= |.AS Sih ERE“? EAk BRA BE PE“ UB 


最 后 ,用 回 车 键 或 单 击 “ 控 制 ”, 选 择 “ 测 试 影片 ” 


第 三 步 : 新 建 图 形 元 件 “ 贺 ”, 如 图 7. 25 所 示 。 

第 四 步 : 新 建 图 层 “ 灯 ”。 将 元 件 “ 圆 ” 拖 入 第 1 帧 的 
舞台 左边 , 遮 住 左 边 的 文字 ; 在 第 15 帧 处 插入 关键 帧 ， 
“ 圆 ? 实 例 移 至 舞台 右边 , 遮 住 右边 的 文字 ,如 图 7. 26、 


到 7. 27 所 示 。 


打开 帧 属性 面板 ,在 第 1 帧 创建 “传统 补 


说 


看 影片 效果 ,如 图 7. 28 所 示 。 


图 7.26 将 “ 圆 " 拖 和 人 谈 住 左边 字 
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图 7.28 影片 效果 


7.3.4 引导 层 运动 动画 的 制作 


在 一 般 情 况 下 ,运动 动画 产生 补 间 动画 时 ,都 是 按照 最 简单 的 方式 产生 的 , 即 按 直 线 从 
起 点 到 终点 方式 产生 ,但 事实 上 ,很 多 运动 并 不 按照 直线 轨迹 运动 ,例如 ,雪花 的 飘落 、 小 乌 
的 飞翔 . 鱼 儿 在 大 海里 邀 游 等 。 当 然 ,如 果 将 曲线 分 解 成 一 个 个 小 的 直线 线段 来 完成 也 未 尝 
不 可 ,但 在 接点 处 的 跳跃 感 仍 会 影响 观看 的 效果 。 在 Flash 中 能 不 能 实现 复杂 的 动画 效果 
呢 ? 答案 是 肯定 的 ,这 就 是 “引导 路 径 动 画 ”。 将 一 个 或 多 个 层 链 接 到 一 个 运动 引导 层 ,使 一 
个 或 多 个 对 象 沿 同一 条 路 径 运 动 的 动画 形式 被 称 为 "引导 路 径 动画 ”。 在 引导 层 中 ,利用 可 
以 产生 曲线 的 工具 绘制 一 条 曲线 ,再 利用 属性 面板 的 设置 ,使 它 作为 运动 对 象 或 实体 的 运动 
轨迹 。 在 演播 时 ,这 条 曲线 并 不 出 现 ,但 它 的 使 用 可 以 实现 完美 的 曲线 运动 效果 。 


1. 创建 引导 路 径 动画 的 方法 


(1) 创建 引导 层 和 被 引导 层 

一 个 最 基本 “引导 路 径 动 画 ” 由 两 个 图 层 组 成 ,上 面 一 层 是 “引导 层 ”, 下 面 一 层 是 “被 引 

(2) 引导 层 和 被 引导 层 中 的 对 象 
引导 层 是 用 来 指示 元 件 运 行路 径 的 ,所 以 “引导 层 ” 中 的 内 容 可 以 是 钢笔 ,铅笔 ,线条 、 椭 
圆 工具 ,矩形 工具 或 画笔 工具 等 绘制 出 的 线段 。 而 “被 引导 层 ” 中 的 对 象 是 跟着 引导 线 走 的 ， 
可 以 使 用 影片 剪辑 ,图形 元 件 ,按钮 ,文字 等 ,但 不 能 应 用 形状 。 
于 引导 线 是 一 种 运动 轨迹 ,不 难 想象 “被 引导 ” 层 中 最 常见 的 动画 形式 是 动作 补 间 动 
画 , 当 播放 动画 时 ,一 个 或 数 个 元 件 将 沿 着 运动 路 径 移 动 。 

(3) 向 被 引导 层 中 添加 元 件 

“引导 动画 ”最 基本 的 操作 就 是 使 一 个 运动 动画 “附着 "在 “引导 线 ” 上 。 所 以 操作 时 特别 
得 注意 "引导 线 ” 的 两 端 ,被 引导 的 对 象 起 始 和 终点 的 “中 心 点 ”一 定 要 对 准 “" 引 导线 ”的 两 个 
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例 7.4 小 球 的 移动 。 

(1) 新 建 一 个 Flash 空白 文档 

单 击 “ 文 件 ”, 选 择 “ 新 建 ”, 将 宽 高 分 别 设 为 400 和 300, 背 景 为 绿色 ,并 将 图 层 改名 为 小 
球 , 如 图 7. 29 所 示 。 


C) 
BEV MAN SAM ZEN SHO SMO) SAO) SOW SAH 


图 7.29 新 建 


(2) 在 小 球 图 层 中 绘制 一 个 小 球 
单 击 “ 椭 圆 工具 ”将 笔触 颜色 改 为 无 色 , 填 充 颜 色 为 线形 红色 。 然 后 在 小 球 图 层 中 绘制 
一 个 小 球 。 注 意 : 按 下 Shift 键 时 ,可 画 出 标准 的 小 球 ,如 图 7. 30 所 示 。 


CIT: RE] 


图 7.30 绘制 小 球 


(3) 制作 小 球 的 补 间 动 画 

在 小 球 的 第 30 帧 插入 一 个 关键 帧 ,然后 创建 补 间 动 画 。 

(4) 添加 运动 引导 层 

右 击 小 球 图 层 , 选 择 * 添 加 传统 运动 引导 层 ”, 然 后 在 引导 层 的 第 一 帧 ,用 线条 工具 绘制 
一 个 路 径 , 如 图 7. 31 所 示 。 
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图 7.31 绘制 路 径 
(5) 将 小 球 移 至 路 径 的 起 点 和 终点 
单 击 小 球 图 层 的 第 一 帧 ,然后 将 小 球 移 到 路 径 的 起 点 ,如 图 7. 32 所 示 。 


RHA RAE) RAV BAD FAM) RET SAHO SMO) AIO) SOW SAH 
[asas =] 


图 7.32 移动 小 球 到 起 点 
单 击 小 球 图 层 的 最 后 一 帧 ,然后 将 小 球 移动 到 路 径 的 终点 ,如 图 7. 33 所 示 。 


FL 
ZAHA RAH REV) BAM SAM REM SAO 控制 (0) BRIO) BOW ANH) 


> 
网 
a) 
T 
E 
2 
2 
z 
2 
Fal 
2 
z 
2 
加 
a 
EA 


图 7.33 移动 小 球 到 终点 
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最 后 ,同时 按 下 Ctrl 十 Enter 键 看 一 下 效果 吧 。 
7.4 动画 的 测试 .优化 和 发 布 


当 所 有 的 动画 效果 、 交 互 效 果 、 声 音效 果 都 被 融入 到 一 个 Flash 作品 中 以 后 ,就 要 考虑 
如 何 将 之 输出 为 一 个 完整 的 文件 了 。 在 输出 前 ,要 对 所 有 的 动画 效果 、 交 互 效 果 及 声音 效果 
做 一 个 整体 的 测试 ,如 果 存 在 问题 ,就 要 进行 调试 排除 。 

测试 除了 解决 动画 中 存在 的 问题 以 外 ,还 有 一 项 重要 的 功能 ,就 是 优化 。 优 化 后 的 影片 
体积 较 小 ,可 以 达到 最 佳 的 传播 效果 。 用 Flash 只 做 到 动画 是 fla 格式 的 ,所 以 在 动画 制作 
完成 后 ,需要 将 fla 格式 的 文件 发 布 成 swf 格式 的 文件 (能 被 Flash 播放 器 播放 的 动画 文 
件 ), 用 于 网 页 播放 。 


7.4.1 动画 的 测试 


Flash CS 提供 了 强大 的 测试 功能 ,因为 Flash 动画 一 般 是 在 网 格 上 播放 ,所 以 文件 的 大 
小 对 动画 的 播放 流畅 度 影响 很 大 ,如 果 文 件 太 大 ,浏览 者 很 可 能 没有 耐心 等 待 动 画 下 载 完 
毕 。 作 为 优秀 的 动画 设计 师 ,不 但 要 有 全 面 的 设计 技术 、 敏 锐 的 艺术 感觉 .新 鲜 的 创意 和 创 
造 力 , 还 应 掌握 用 最 小 的 文件 展示 最 完美 的 动画 效果 。 

可 以 在 两 种 环境 下 测试 动画 ,一 种 为 动画 编辑 环境 , 另 一 种 为 动画 测试 环境 。 下 面 就 针 
对 两 种 测试 环境 的 特点 ,分别 进行 介绍 。 


1. 在 动画 编辑 环境 下 测试 影片 


在 动画 编辑 环境 下 ,用 户 按 Enter 键 可 以 对 动画 进行 简单 的 测试 ,但 动画 中 的 影片 剪辑 
元 件 ,按钮 元 件 等 交互 效果 均 不 能 得 到 测试 。 而 且 在 动画 编辑 模式 下 ,测试 动画 得 到 的 动画 
速度 比 输出 或 优化 后 的 动画 速度 慢 。 在 动画 编辑 环境 下 通过 设置 ,可 以 对 按钮 元 件 及 简单 
的 帧 动作 (play,stop,gotoplay 和 gotoandstop) 进 行 测试 。 

(1) 按钮 元 件 测试 

要 在 动画 编辑 环境 下 测试 按钮 元 件 ,选择 “控制 ">“ 启 用 简单 按钮 "命令 。 此 时 按钮 将 
做 出 与 最 终 动画 中 一 样 的 响应 ,包括 这 个 按钮 所 附加 的 脚本 语言 。 

(2) 简单 帧 动作 测试 

要 在 动画 编辑 环境 下 测试 简单 的 帧 动作 ,选择 “控制 ”>“ 启 用 简单 帧 动作 ”命令 。 


2. 在 动画 测试 环境 下 测试 


测试 动画 与 场景 主要 通过 “控制 "菜单 实现 。 执 行 “ 控 制 *>>“ 测 试 影片 ”命令 ,Flash 将 
自动 导出 当前 动画 中 的 所 有 场景 ,然后 将 文件 在 新 窗口 中 打开 。 


7.4.2 优化 动画 文件 


随 着 动画 文件 大 小 的 增 大 , 它 的 下 载 和 回放 时 间 也 会 增加 。 作 为 发 布 过 程 中 的 一 部 分 ， 
Flash 自动 对 动画 执行 一 些 优化 ,例如 ., 它 可 以 在 导出 时 检测 重复 的 形状 ,在 文件 中 只 把 它 
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们 放 一 次 ,并 且 把 嵌 套 组 合 转 换 成 单个 组 合 。 

在 导出 动画 之 前 ,可 以 使 用 多 种 策略 来 减 小 文件 的 大 小 ,从 而 对 其 进行 进一步 的 优化 。 
在 动画 发 布 的 时 候 , 也 可 以 把 它 压缩 成 文件 。 

优化 的 主题 策略 包括 以 下 4 点 。 


1. 总 体 上 优化 


CL) 多 次 出 现 的 元 素 ,使 用 元 件 、 动 画 或 者 其 他 对 象 。 

(2) 只 要 可 能 ,就 要 使 用 补 间 动 画 , 补 间 动 画 与 一 系列 的 关键 帧 相 比 ,占用 的 文件 空间 
ED, 

(3) 对 于 动画 序列 ,要 使 用 影片 剪辑 而 不 是 图 形 元 件 。 

(4) 限制 每 个 关键 帧 中 的 改变 的 区 域 , 在 尽 可 能 小 的 区 域 中 执行 动作 。 

(5) 避免 使 用 动画 位 图 元 素 , 使 用 位 图 图 像 作为 背景 或 者 静态 元 素 。 

(6) 对 于 声音 , 尽 可 能 使 用 MP3 这 种 占用 空间 较 小 的 声音 格式 ,如 非 必要 ,不 要 添加 太 
长 的 声音 文件 。 


2. 优化 元 素 和 线条 


(1) 尽量 组 合 元 素 。 

(2) 使 用 层 把 随 动画 过 程 改变 的 元 素 和 不 随 动 画 过 程 改变 的 元 素 分 开 。 

(3) 限制 特殊 线条 类 型 的 数量 ,如 虚线 ,点 状 线 、 锯 齿 状 线 等 , 实 线 所 需 的 内 存 空 间 较 
小 ,铅笔 工具 生成 的 线条 比 画 笔 笔触 生成 的 线条 所 需 的 内 存 空间 更 小 。 


3. 优化 文本 和 字体 


(1) 限制 字体 的 数量 ,尽量 少 使 用 嵌入 字体 ,因为 它们 会 增加 文件 的 大 小 。 

(2) 对 于 “嵌入 字体 ”选项 ,只 选中 需要 的 字符 ,不 包括 所 有 字体 。 

4. 优化 颜色 

(1) 在 元 件 属性 检查 器 中 ,使 用 “颜色 ”菜单 创建 一 个 元 件 的 具有 不 同 颜色 的 多 个 实例 。 
(2) 使 用 混 色 器 来 使 影片 的 颜色 调 色 板 与 浏览 器 的 调 色 板 匹 配 。 


G) 尽量 少 使 用 渐变 色 , 使 用 渐变 色 填充 区 域 比 使 用 纯色 填充 大 概 多 需要 50B 空间 。 
(4) 尽量 少 使 用 Alpha 透明 度 , 它 会 减 慢 回放 速度 。 


7.4.3 文件 的 发 布 


可 以 将 Flash 动画 发 布 成 多 种 格式 ,而 在 发 布 之 前 需 进 行 必要 的 发 布设 置 ,定义 发 布 的 
格式 及 相应 的 设置 ,达到 最 佳 效 果 。 在 “发 布设 置 " 对 话 框 中 ,可 以 一 次 性 发 布 多 种 格式 , 且 
每 种 格式 均 保存 为 指定 的 发 布设 置 ,可 以 拥有 不 同 的 名 字 。 接 下 来 介绍 发 布 动 画 的 方法 。 


1. 发 布设 置 


执行 “文件 ”>“ 发 布设 置 ”命令 。 可 以 选择 发 布 后 输出 的 文件 格式 。 默 认 的 是 Flash 和 
HTML 格式 ,因此 在 对 话 框 中 就 有 相应 的 选项 卡 。 还 可 以 选择 发 布 成 为 GIF A(R. JPEG 
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图 像 .PNG 图 像 、Windows ùk tk X fF, Macintosh 放映 文件 。 如 果 用 户 选 中 其 他 输出 格式 ， 
自然 也 会 在 右边 打开 相应 的 选项 卡 。 

2. 发 布 预 览 


执行 “文件 ”>“ 发 布 预 览 ” 命 令 ,该 命令 可 以 使 发 布 的 文件 格式 在 默认 打开 的 应 用 程序 
中 打开 预览 ,可 以 预览 的 文件 格式 类 型 是 以 “发 布设 置 " 对 话 框 中 的 设置 为 基础 的 。 


3. 发 布 动画 


当 制 作 完 动 画 并 对 预览 效果 满意 ,就 可 以 执行 文件” 发布? 命令 。 默 认 情况 下 ,发 布 
完 后 的 文件 以 所 选 的 文件 类 型 的 扩展 名 保存 在 和 源 文 件 同一 目录 下 。 


7.4.4 动画 文件 的 导出 


将 Flash 动画 优化 并 测试 后 ,就 可 以 利用 导出 命令 将 动画 导出 为 其 他 文件 格式 。 除 了 
可 以 保存 . fla 格式 的 源 文件 ,以 及 发 布 成 为 Flash 播放 文件 . swf 格式 或 网 页 文件 . html 格 
式 外 ,还 可 以 生成 更 多 其 他 格式 的 文件 。 

在 “文件 ">" 导出 ”菜单 中 包含 三 个 导出 命令 :“ 导 出 图 像 “ 导 出 所 选 内 容 *" 和 “导出 影片 ”。 


1. 导出 图 像 


选择 “导出 图 像 " 弹 出 “导出 图 像 ” 对 话 框 ,可 以 选择 导出 文件 类 型 为 图 像 格 式 文件 ,可 以 
保存 为 . dxf、. bmp,. jpg.. png 等 格式 文件 。 


2. 导出 影片 


选择 “导出 影片 ”弹出 “导出 硬 片 ”对 话 框 。 可 从 “保存 类 型 * 下 拉 列 表 中 选择 。 可 以 保存 
为 . spl,. avis. mov». gif 等 格式 的 文件 。 在 “导出 影片 "对话 框 中 保存 的 文件 应 注意 以 下 选 

(1) Flash 影片 (x*. swf): 导出 的 文件 是 动态 swf 文件 ,只 有 在 安装 了 Flash 播放 器 的 
浏览 器 中 才能 播放 ,这 也 是 Flash 动画 的 默认 保存 文件 类 型 。 

(2) WAV 音频 文件 (* . wav): 仅 导 出 影片 中 的 声音 文件 。 

(3) Adobe Illustrator 序列 文件 (* .ai : 保存 影片 中 每 一 帧 的 矢量 信息 ,在 保存 时 可 以 
选择 编辑 软件 的 版 本 ,然后 在 Adobe Illustrator 中 进行 编辑 。 

(4) GIF 动画 (* .gif): 保存 影片 中 每 一 帧 的 信息 组 成 一 个 庞大 的 动态 GIF 动画 ,此 时 
可 以 认为 Flash 是 制作 GIF 动画 的 软件 。 

(5) JEPG 序列 文件 (* jpg): 将 影片 中 每 一 帧 的 图 像 一 次 导出 为 多 个 .jpg 文件 。 


小 结 


本 章 从 Flash CS6 的 基础 知识 人手, 介绍 了 Flash CS6 的 工作 界面 的 组 成 及 各 模块 的 
基本 使 用 方法 。 讲 解 了 Flash 基本 概念 、 基 础 动画 设计 及 动画 文件 的 测试 .优化 和 导出 。 
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习题 

一 、 填空 题 

1. Flash CS6 源 文件 的 扩展 名 是 

2. 要 直接 在 舞台 上 预览 动画 效果 ,应 该 按 快 捷 键 A 

3. 在 Flash CS6 程序 窗口 中 ,对 动画 内 容 进行 编辑 的 整个 区 域 称 为 ;用户 可 
以 在 整个 区 域内 对 对 象 进行 编辑 绘制 。 用 于 显示 动画 文件 的 内 容 , 供 用 户 对 对 象 
进行 浏览 ,绘制 和 编辑 ,默认 情况 下 它 为 白色 。 

4. 元 件 有 x Al 3 种 类 型 。 

5. 在 Flash 中 要 创建 元 件 ,一 般 有 2 种 方法 ,一 种 方法 是 , 另 一 种 方法 是 首先 
创建 一 个 ,然后 

二 、 简 答题 


1. 什么 是 逐 帧 动画 ” 逐 帧 动画 有 什么 特点 ? 

2. 什么 是 遗 罩 动 画 ? 谈 蛙 动画 有 什么 特点 ? 

3. 什么 是 引导 层 动画 ? 引导 层 动画 有 什么 特点 ? 
三 、 上 机 实验 

请 在 互联 网 上 搜集 素材 ,做 出 一 个 雪花 纷飞 的 场景 。 
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Gi HTML Reference 


Ordered Alphabetically 


Tag Description 

<I... > Defines a comment 

<!DOCTYPE> Defines the document type 

<a> Defines an anchor 

<abbr> Defines an abbreviation 

<acronym> Defines an acronym 

<address> Defines contact information for the author/owner of a document 
<applet> Deprecated. Defines an embedded applet 

<area /> Defines an area inside an image-map 

<b> Defines bold text 

<base /> Defines a default address or a default target for all links on a page 
<basefont /> Deprecated. Defines a default font, color, or size for the text in a page 
<bdo> Defines the text direction 

<big> Defines big text 

<blockquote> Defines a long quotation 

<body> Defines the document’s body 

<br /> Defines a single line break 

<button> Defines a push button 

<caption> Defines a table caption 

<center> Deprecated. Defines centered text 

<cite> Defines a citation 

<code> Defines computer code text 

<col /> Defines attribute values for one or more columns in a table 
<colgroup> Defines a group of columns in a table for formatting 

<dd> Defines a description of a term in a definition list 

<del> Defines deleted text 


<dir> Deprecated. Defines a directory list 
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<div> 
<din> 
<dl> 
<dt> 
<em> 
<fieldset> 
<font> 
<form> 
<frame /> 
<frameset> 
<hl> to <h6> 
<head> 
<hr /> 
<html> 
<i> 
<iframe> 
<img /> 
<input /> 
<ins> 
<isindex> 
<kbd> 
<label> 
<legend> 
<li> 

<link /> 
<map> 
<menu> 
<meta /> 
<noframes> 
<noscript> 
scripts 
<object> 
<ol> 
<optgroup> 
<option> 
<p> 
<param /> 
<pre> 
<q> 

<s> 
<samp> 
<script> 
<select> 


Defines a section in a document 

Defines a definition term 

Defines a definition list 

Defines a term (an item) in a definition list 
Defines emphasized text 

Defines a border around elements in a form 
Deprecated. Defines font, color, and size for text 
Defines an HTML form for user input 

Defines a window (a frame) in a frameset 
Defines a set of frames 

Defines HTML headings 

Defines information about the document 

Defines a horizontal line 

Defines an HTML document 

Defines italic text 

Defines an inline frame 

Defines an image 

Defines an input control 

Defines inserted text 

Deprecated, Defines a searchable index related to a document 
Defines keyboard text 

Defines a label for an input element 

Defines a caption for a fieldset element 

Defines a list item 

Defines the relationship between a document and an external resource 
Defines an image-map 

Deprecated. Defines a menu list 

Defines metadata about an HTML document 
Defines an alternate content for users that do not support frames 
Defines an alternate content for users that do not support client-side 
STF 

Defines an embedded object 

Defines an ordered list 

Defines a group of related options in a select list 
Defines an option in a select list 

Defines a paragraph 

Defines a parameter for an object 

Defines preformatted text 

Defines a short quotation 

Deprecated. Defines strikethrough text 

Defines sample computer code 

Defines a client-side script 


Defines a select list (drop-down list) 
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<small> Defines small text 

<span> Defines a section in a document 
<strike> Deprecated. Defines strikethrough text 
<strong> Defines strong text 

<style> Defines style information for a document 
<sub> Defines subscripted text 

<sup> Defines superscripted text 

<table> Defines a table 

<tbody> Groups the body content in a table 
<td> Defines a cell in a table 

< textarea > Defines a multi-line text input control 
<tfoot> Groups the footer content in a table 
<th> Defines a header cell in a table 
<thead> Groups the header content in a table 
<title> Defines the title of a document 

<tr> Defines a row in a table 

<t> Defines teletype text 

<u> Deprecated, Defines underlined text 
<ul> Defines an unordered list 

<var> Defines a variable part of a text 
<xmp> Deprecated, Defines preformatted text 
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Ordered Alphabetically 


Property 

background 
background-attachment 
background-color 
background-image 
background-position 
background-repeat 
border 
border-bottom 
border-bottom-color 
border-bottom-style 
border-bottom-width 
border-color 
border-collapse 


border-left 


Description 

Sets all the background properties in one declaration 

Sets whether a background image is fixed or scrolls with the rest of the page 
Sets the background color of an element 

Sets the background image for an element 

Sets the starting position of a background image 

Sets how a background image will be repeated 

Sets all the border properties in one declaration 

Sets all the bottom border properties in one declaration 
Sets the color of the bottom border 

Sets the style of the bottom border 

Sets the width of the bottom border 

Sets the color of the four borders 

Specifies whether or not table borders should be collapsed 


Sets all the left border properties in one declaration 
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border-left-color 
border-left-style 
border-left-width 
border-right 
border-right-color 
border-right-style 
border-right-width 
border-spacing 
border-style 
border-top 
border-top-color 
border-top-style 
border-top-width 
border-width 
bottom 


caption-side 
clear 


clip 


color 
content 


counter-increment 
counter-reset 
cursor 

direction 

display 


empty-cells 


float 

font 
font-family 
font-size 
font-style 
font-variant 
font-weight 
height 

left 
letter-spacing 
line-height 
list-style 
list-style-image 
list-style-position 


list-style-type 


Sets the color of the left border 

Sets the style of the left border 

Sets the width of the left border 

Sets all the right border properties in one declaration 

Sets the color of the right border 

Sets the style of the right border 

Sets the width of the right border 

Specifies the distance between the borders of adjacent cells 
Sets the style of the four borders 

Sets all the top border properties in one declaration 

Sets the color of the top border 

Sets the style of the top border 

Sets the width of the top border 

Sets the width of the four borders 

Sets the bottom margin edge for a positioned box 
Specifies the placement of a table caption 

Specifies which sides of an element where other floating elements are 
not allowed 

Clips an absolutely positioned element 

Sets the color of text 

Used with the: before and: after pseudo-elements, to insert 
generated content 

Increments one or more counters 

Creates or resets one or more counters 

Specifies the type of cursor to be displayed 

Specifies the text direction/ writing direction 

Specifies the type of box an element should generate 
Specifies whether or not to display borders and background on empty 
cells in a table 

Specifies whether or not a box should float 

Sets all the font properties in one declaration 

Specifies the font family for text 

Specifies the font size of text 

Specifies the font style for text 

Specifies whether or not a text should be displayed in a small-caps font 
Specifies the weight of a font 

Sets the height of an element 

Sets the left margin edge for a positioned box 

Increase or decrease the space between characters in a text 
Sets the line height 

Sets all the properties for a list in one declaration 
Specifies an image as the list-item marker 

Specifies where to place the list-item marker 


Specifies the type of list-item marker 


margin 
margin-bottom 
margin-left 
margin-right 
margin-top 
max-height 
max-width 
min-height 
min-width 


orphans 


outline 
outline-color 
outline-style 
outline-width 
overflow 
padding 
padding-bottom 
padding-left 
padding-right 
padding-top 
page-break-after 
page-break-before 
page-break-inside 
position 

quotes 

right 
table-layout 
text-align 
text-decoration 
text-indent 
text-shadow 
text-transform 
top 

unicode-bidi 
vertical-align 
visibility 
white-space 


widows 


width 
word-spacing 


z-index 
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Sets all the margin properties in one declaration 

Sets the bottom margin of an element 

Sets the left margin of an element 

Sets the right margin of an element 

Sets the top margin of an element 

Sets the maximum height of an element 

Sets the maximum width of an element 

Sets the minimum height of an element 

Sets the minimum width of an element 

Sets the minimum number of lines that must be left at the bottom of a 
page when a page break occurs inside an element 

Sets all the outline properties in one declaration 

Sets the color of an outline 

Sets the style of an outline 

Sets the width of an outline 

Specifies what happens if content overflows an element's box 
Sets all the padding properties in one declaration 

Sets the bottom padding of an element 

Sets the left padding of an element 

Sets the right padding of an element 

Sets the top padding of an element 

Sets the page-breaking behavior after an element 

Sets the page-breaking behavior before an element 

Sets the page-breaking behavior inside an element 
Specifies the type of positioning for an element 

Sets the type of quotation marks for embedded quotations 
Sets the right margin edge for a positioned box 

Sets the layout algorithm to be used for a table 
Specifies the horizontal alignment of text 

Specifies the decoration added to text 

Specifies the indentation of the first line in a text-block 
Specifies the shadow effect added to text 

Controls the capitalization of text 

Sets the top margin edge for a positioned box 

sets the direction of text 

Sets the vertical alignment of an element 

Specifies whether or not an element is visible 

Specifies how white-space inside an element is handled 
Sets the minimum number of lines that must be left at the top of a page 
when a page break occurs inside an element 

Sets the width of an element 

Increases or decreases the space between words in a text 


Sets the stack order of an element 


2.1 Getting to Know HTML 


2.1.1 Hello, World — creating Your First HTML File 


To create HTML files in Windows OS we are going to use Notepad—it ships with 
every copy of Windows. If you have got your own favorite editor that runs on Windows, 
that’s fine too; just make sure you can create a plain text file with an ". html" extension. 

Create your first HTML file step by step (take Windows 7 as example). 

Step 1; 

Open the Start menu and navigate to Notepad. 

You'll find the Notepad application in Accessories. The easiest way to get there is to 
click on the "Start" menu, then on "All Programs", then "Accessories". You'll see 
Notepad listed there. 

Step 2: 

Open Notepad. 

Once you've located Notepad in the Accessories folder, go ahead and click on it. 
You'll see a blank window ready for you to start typing HTML. 

Step 3 (optional but recommended) ; 

Don’t hide extensions of well known file types. 

By default Windows 7’s File Explorer hides the file extensions of well known file 
types. For example, a file named "hello, html" will be shown in the Explorer as "hello" 
without its ". html" extension. 

It’s much less confusing if Win7 shows you these extensions, so let’s change your 
folder options so you can see the file extensions. 

First, in any Explorer window select "Folder Options… ”from the Tools menu. 

Next, in the "View" tab, under "Advanced settings". scroll down until you see 
"Hide extensions for known file types" and uncheck this option. 

That’s it. Click on the OK button to save the preference and you'll now see the file 


extensions in the Explorer. 
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Now, type the following code in the blank window of Notepad: 
Example 2. 1 
Then, save your work by choosing "Save" from the File menu and you'll see a "Save 


As" dialog box. First, click Desktop icon on left column of dialog box, then choose "All 


Files" in "Save as type" drop-down box (otherwise Notepad will add a ". txt" to your 
filename). Next, enter "index. html" as the file name and click on the Save button. 

Open your Web page in a browser. 

Double click the index. html file you created (located in desktop). success! The 
browser has shown the web page for you as the Figure 2. 1. 

Congratulations, you've just written your first HTML! 


HA: 为 避免 代码 及 图 片 重复 ,本 章 所 提 到 的 所 有 例子 及 图 片 , 均 对 应 中 文 第 2 章 
HTML 相同 的 序号 及 图 片 。 


2.1.2 Terms of HTML 


You may notice the <html >, </html>, <hl >, <body> in Hello, World 
HTML document, they are used to mark up the text in HTML. Now, let’s take a close 
look at how HTML tags work in Example 2. 2. 

Example 2. 2. 

In Example 2.2, <hl> and </h1> are called tags with <hl> is opening tag and 
</h1> is closing tag. We usually put some pieces of content within opening tag and 
closing tag. Here, the content is "Hello, World". We use tags to tell the browser that our 
content, "Hello, World", is a top level heading (that is, heading level one). The whole 
shebang of Example 2. 2 is called an element. In this case we can call it the <hl > 
element. An element consists of the enclosing tags and the content in between. 

To tell the browser about the structure of your web page. use pairs of tags around 
your content. Remember the following formula: 

Element = Opening Tag + Content + Closing Tag 

Tags consist of the tag name surrounded by angle brackets, that is, the < and > 
character. As opening tag» <hl> begins the element, and closing tag </hl> ends the 
element. We know </h1> is a closing tag because it comes after the content, and it’s got 
a "/" before the "h1". All closing tags have a "/" in them. 

tag 标签 ,标记 

opening tag or start tag 起 始 标签 

closing tag or end tag 终止 标签 

element 元 素 


2.1.3 HTML and HTML5 


The original language of the World Wide Web is HTML (HyperText Markup 
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Language). often referred to by its current version, HTML 4. 01 or just HTML4 for 
short. HTML was originally an application of SGML (Standard Generalized Markup 
Language), a sort of meta-language for making markup languages. SGML is quite 
complicated, and in practice most browsers do not actually follow all of its oddities. 
HTML as actually used on the web is best described as a custom language influenced by 
SGML. 

Another important thing to note about HTML is that all HTML user agents (this is a 
term for programs that read HTML, including web browsers. search engine web 
crawlers, and so forth) have extremely tolerant error handling. Many technically illegal 
constructs, like misnested tags or bad attribute names, are allowed or safely ignored. This 
error-handling is relatively consistent between browsers. But there are lots of differences 
in edge cases, because this error handling behavior is not documented or part of any 
standard. This is why it is a good idea to validate your documents. 

HTML5 is the latest standard for HTML. 

HTML5 was designed to replace both HTML 4, XHTML. 

Its core aims have been to improve the language with support for the latest multimedia 
while keeping it easily readable by humans and consistently understood by computers and 
devices. 

HTML5 is also cross-platform. It is designed to work whether you are using a PC, or 
a Tablet, a Smartphone, or a Smart TV. 

HTML 超 文本 置 标语 言 

meta 元 ,… 的 … 

agent 代理 程序 

parser 解析 器 ,分析 器 


2.1.4 Get Ready for HTML 


Many pages on the Internet contain "bad" HTML. 

The following HTML code will work just fine if you view it in a browser (even if it 
does not follow the HTML rules); 

Example 2. 3 

To standardize the HTML codes, the following 4 major rules must be abided by: 


1. HTML Elements Must Be Properly Nested 


In HTML, some elements can be improperly nested within each other, like this: 

Example 2. 4 

In HTML., all elements must be properly nested within each other, like this: 

Example 2.5 

Note: A common mistake with nested lists, is to forget that the inside list must be 
within <li> and </li> tags. 
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This is wrong: 

Example 2. 6 

This is correct: 

Example 2.7 

Notice that we have inserted a </li> tag after the </ul> tag in the "correct" code 


example, 
2. HTML Elements Must Always Be Closed 


Non-empty elements must have a closing tag. 
This is wrong: 

Example 2. 8 

This is correct: 

Example 2. 9 

Empty elements must also be closed. 

This is wrong: 

Example 2. 10 

This is correct: 


Example 2. 11 
3. HTML Elements Must Be In Lower Case 


Tag names and attributes must be in lower case. 
This is wrong: 

Example 2. 12 

This is correct: 


Example 2. 13 
4. HTML Documents Must Have One Root Element 


All HTML elements must be nested within the < html > root element. Child 
elements must be in pairs and correctly nested within their parent element. 

The basic document structure is: 

Example 2. 14 

The HTML element is the outermost element in HTML and HTML documents. The 
HTML element is also known as the root element. 

The <html> tag tells the browser that this is an HTML document. 

The head element is a container for all the elements within the head section. Elements 
inside < head > can include scripts, instruct the browser where to find style sheets, 
provide meta information, and more. The following tags can be added to the head section; 
<base>, <link>, <meta>. <script>, <style>. and <title>. The <title> tag 


defines the title of the document, and is the only required element in the head section. 
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The body element contains all the contents displayed in web browser, such as text, 
hyperlinks, images, tables, lists, etc. 

A simple HTML document. with the minimum of required tags: 

Example 2. 15 

Web page of Example 2. 15 is shown as Figure 2. 2 


Some more HTML syntax rules will be instructed in related sections. 


E 2 Text Elements 
w 


From this section, we begin to learn basic HTML tags and attributes. 


2.2.1 Headings 


Here is Example 2. 16 to show you how headings’ tag work: 
Example 2. 16 

And Figure 2. 3 is how Example 2. 16 looks in the browser: 
The <hl> to <h6> tags are used to define HTML headings. 
Syntax of Headings: 


<h# align="left|center|right"> headings </h# > 


# (from 1 to 6) is the size of headings, <hl> defines the largest heading and <h6 > 
defines the smallest heading. 

"align" is an optional attribute. which specifies the alignment of a heading. "|" in 
syntax means "or", i.e. multiple-choice. 

Attributes; 

Tags can also have attributes, which are extra bits of information. Attributes appear 
inside the opening tag and their value is always inside quotation marks and must be in 
lower case. They look something like <tag attribute="value">content+**</tag>. Tags 
become more useful once you add attributes. 

Example 2. 17 

The browser shows Example 2. 17 as Figure 2. 4. 

In comparison with Example 2. 2, let’s take a look at the element’s structure once 
more in Example 2. 18. 

Example 2. 18 

<h1> is opening tag and </h1> is closing tag, and "Heading 1 is on the left." is 
content in between. Now we can add optional attributes in opening tag to enrich the 
element. 

Note 1; Tag <h# >œ and tag <head> are different. 

Note 2; The "align" attribute of the <hl > to <h6> elements was deprecated in 
HTML 4. 01, and is not supported in HTML 1.0 Strict DTD. Use CSS instead. 
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2.2.2 Title 


The <title> tag defines the title of the document. 

The title element; 

e defines a title in browser’s title bar. 

e provides a title for the page when it is added to favorites. 

e displays a title for the page in search-engine results. 

Every HTML document must have a title element in the head section. Note that 
<title> element is required within <head> section rather than <body> section. 

Authors should use the title element to identify the contents of a document. Since 
users often consult documents out of context, authors should provide context-rich titles. 
Thus, instead of a title such as "Introduction", which doesn’t provide much contextual 


background, authors should supply a title such as "Introduction to Nordic Walking" 


instead, 


Syntax of Title: 
<title> title's text </title> 


Replace the Example 2. 17 <title> element content with "align attribute of <h> 
tag", as Example 2. 19. 
Example 2. 19 


The browser shows Example 2. 19 as Figure 2. 5. 
2.2.3 Paragraph 


The p element automatically creates some space before and after itself. The space is 
automatically applied by the browser. or you can specify it in a style sheet. 


Syntax of paragraph: 
<p align =" left| center | right"> text </p> 


Example 2. 20 

The browser shows Example 2. 20 as Figure 2. 6. 

Nothing special? Try to copy all the contents in browser’s window of Figure 2. 6, and 
then paste them to notepad. 

Anything special? You may know why so many extra single line between paragraphs 
when you copy the contents from web page and then paste them to your notepad or Word 
application. 

Some other default behaviors of paragraphs. 

Example 2. 21 

The browser shows Example 2. 21 as Figure 2. 7. 


From now on, this textbook will lead readers to construct a website for a fictional 
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club, Walker Club, step by step from what has been taught. 
Project 2. 1; Home page of Walker Club (index. html version 1). 


The browser shows Project 2.1 as Figure 2. 8. 


2.2.4 Single Line Break 


The <br> tag inserts a single line break. 

The <br> element is an element that doesn’t have any content. Why? Because it’s 
just meant to be a linebreak, nothing else. <br> isn’t the only element like this; there 
are others, and we have a name for them: empty elements. In HTML the <br> tag has 
no end tag. In HTML the <br> tag must be properly closed, like this; <br />. 

From p tag: we know that browsers ignore lines and spaces created by Enter key and 
spacebar. <br> tag is used to force a line break. 


Syntax of linebreak: 
Text <br /> 


Insert Example 2. 22 to <body> element, we can understand the function of <br> 
tag. 

Example 2. 22 

In respect of linebreak itself. 

<p>text</p> 

is equivalent to 

text<br /><br /> 

got it? 

In practice, use the <br> tag to insert line breaks, not to create paragraphs. 

Example 2. 23 

The browser shows Example 2. 23 as Figure 2. 9. 


The <nobr> tag is used to disallow any line breaks in the text between the tags. 


2.2.5 Horizontal Rule 


The <hr> tag creates a horizontal line in an HTML page. 

The hr element is an empty element and can be used to separate content in an HTML 
page. 

Syntax of horizontal rule: 

<hr align = "left| center | right" size = "pixels" width= "pixels or %" color = "color or color 

code" /> 

size; height of horizontal rule. 

width; width of horizontal rule. 


color: color of horizontal rule. use color or color code. Refer to Table 2. 1 for some 
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common colors and color code. 


2.2.6 Comment 


The comment tag (<! 一 … 一 二 ) is used to insert a comment in the source code. A 
comment will be ignored by the browser. You can use comments to explain your code, 
which can help you when you edit the source code at a later date. 

You can also store program-specific information inside comments, In this case they 
will not be visible for the user, but they are still available to the program. A good practice 
is to comment the text inside scripts and style elements to prevent older browsers, that do 
not support scripting or styles, from showing it as plain text. 


Syntax of comment: 
<! -- comments -- > 


Example 2. 24 


The browser shows Example 2. 24 as Figure 2. 10. 


2.2.7 Division 


The <div> tag defines a division or a section in an HTML document. 
The <div> tag is often used to group block-elements to format them with styles. 


Syntax of division; 
<div> content (text, image or table)</div> 


Example 2. 25 
Project 2. 2 is shown in the browser as Figure 2. 11. 


The div element is very often used with CSS to layout a web page. 


2.3 Hyperlink 


In web terms, a hyperlink is a reference (an address) to a resource on the web. 
Hyperlinks can point to any resource on the web: an HTML page, an image, a sound file, 
a movie, etc. An anchor is a term used to define a hyperlink destination inside a 
document. The HTML anchor element <a>, is used to define both hyperlinks and 
anchors. 


The <a> element is usually referred to as a link or a hyperlink. 


2.3.1 <a> Tag 


Example 2.26 defines a link to Example 2. 25 web page by using <a> tag. 
Example 2. 26 
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The browser shows Example 2. 26 as Figure 2. 12. 


Syntax of anchor: 
<ahref = "url"> Link text </a> 


The most important attribute of the <a> element is the href attribute. which defines 
the link "destination address". The start tag contains attributes about the link, The 
element content (Link text) defines the part to be displayed. 

Note: The element content doesn’t have to be text. You can link from an image or 
any other HTML element. 

By default, links will appear as follows in all browsers: 

An unvisited link is underlined and blue. A visited link is underlined and purple. An 


active link is underlined and red. 


2.3.2 Path and Directory 


A path, the general form of a filename or of a directory name, specifies a unique 
location in a file system. A path points to a file system location by following the directory 
tree hierarchy expressed in a string of characters in which path components, separated by a 
delimiting character, represent each directory. The delimiting character is most commonly 
the slash ("/"), the backslash character ("\"). though some operating systems may use a 
different delimiter. Paths are used extensively in computer science to represent the 
directory/file relationships common in modern operating systems, and are essential in the 
construction of Uniform Resource Locators (URLs). 

Systems can use either absolute or relative paths. A full path or absolute path is a 
path that points to the same location on one file system regardless of the working directory 
or combined paths. It is usually written in reference to a root directory. A relative path is 
a path relative to the working directory of the user or application, so the full absolute path 
may not need to be given. 

Example 2.27 absolute path. 

Example 2.28 relative path. 

As can be seen from the above example, the absolute path contains the full path 
instead of a few directories contained within the absolute path. 

The absolute path is typically used with the domain to point to Web elements that are 
on another domain. For example, link to the Google site—what need to do is to include 
the domain in the URL as Example 2. 29. 

Example 2. 29 

If referring to a Web element that is on the same domain, relative path is a good 
choice. Relative paths change depending upon what page the links are located on. There 


are 4 rules to creating a link using the relative path: 
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1. link to the file in the current directory 
<ahref= "filename. html"> Link text </a> 

2. link to the file in the subdirectory 

<a href= "subdirectory/filename. html"> Link text </a> 
3. link to the file in the parent directory 


<ahref = "../filename. html"> Link text </a> 
"../" means return to the parent directory 


4. link to the file in the sibling directory 


<a href= "../sibling directory/filename. html"> Link text </a> 
".,/sibling directory/" means return to the parent directory first, and then get in to the 
sibling directory 


2.3.3 Organizing Website Directory Structure 


Before start creating more HTML pages, it’s time to get things organized. So far, 
there is only one file "index. html" in Project directory/folder. It will be much more 
manageable if the Web pages, graphics, and other resources are organized into a set of 
directories/folders. Now, the Walker Club is given a meaningful directory structure as 
Figure 2. 13 and Figure 2. 14. 

From the 4 rules studied in previous section, the following 4 examples instruct how to 
create hyperlink with reference to Figure 2. 14. 

Link from "articlel. html" to "article2. html" 

Example 2. 30 

Link from "index. html" to "article2. html" 

Example 2. 31 

Link from "activityl. html" to "index. html" 

Example 2. 32 

Link from "articlel. html" to "activityl. html" 

Example 2. 33 


2.3.4 The Target Attribute 


The target attribute of <a> tag defines where the linked document will be opened. 


The code below (modified version of Example 2. 26) will open the document in a new 
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browser window: 

Example 2. 34 

Compare Example 2. 26 with its modified version Example 2. 34. When "Link to 
Example 2. 25" is clicked in Example 2. 26 web page, the browser shows Example 2. 25 
web page in current window (it replaces the Example 2. 26 web page). However, when 
"Link to Example 2. 25" is clicked in Example 2. 34 web page, Example 2. 25 web page is 
opened in a new browser window (Example 2. 34 web page is still there). The benefit is 
obvious-visitors open a link in a new browser window, so that they do not have to leave 


your Web site. 


2.3.5 Link to A Location on the Same Page 


The term link or hyperlink is used when the <a> element points to a resource. The 
term anchor is used when the <a> elements define an address inside a document, The 
hyperlink has been discussed in previous section, and the anchor will be discussed in this 
section, 

When the name attribute is used, the <a> element defines a named anchor inside an 
HTML document. 


Named anchor syntax: 

<a name = "label"> Any content </a> 
The link syntax to a named anchor: 
<a href =" + label"> Link text </a> 


The = in the href attribute defines a link to a named anchor. 

Example 2. 35 

The browser shows Example 2. 35 as Figure 2. 15. 

Named anchor are not displayed in any special way. They are invisible to the reader. 
Named anchors are often used to create "table of contents" at the beginning of a large 
document. Each chapter within the document is given a named anchor, and links to each of 


these anchors are put at the top of the document. 


2.3.6 Link to Email Message 


Just about every site has one or more ‘mailto’ links, allowing people to send email 
directly from a web page. 


A standard mailto link looks like this: 
<a href = "mailto: someone@ site. com"> Link text </a> 


Example 2. 36 
The browser shows Example 2. 36 as Figure 2. 16. 
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With the effect expected from any email link—hyperlinked text that fires up a new 
message window with the recipients email address conveniently filled in already (only work 


with email client such as Outlook Express. Foxmail installed). 


2.3.7 Create A Download Link 


Sometimes the website allows visitors to be able to download items to their home 
computer, Things like large documents and PDF files. long videos, or songs. But most 
files are automatically opened in the browser window rather than saved as a download file. 

Two ways to do it will be explained here—an easy way and a slightly harder way. The 
first requires that website visitors do most of the work, while the second requires that 
authors do a little work to the file to be downloaded. 

Here’s How: 

Upload the file to be downloaded to the specific directory of Web server. 


Edit the web page and add a standard anchor link to the document. 
<a href = "large document. pdf"> Download the large document </a> 


Add text next to the link telling the visitors they need to right-click the link in order 
to download it. 


Right-click the link and choose "Save Target As..." to save the document to visitors’ 
computer, 

If the visitors ignore that step, the file can be adjusted to something that will be 
automatically downloaded by most browsers; a rar file or compressed file. 

Use WinRAR compression program to turn the download file into a rar file. 

Upload that rar file to the Web server. 


Edit the page and add a standard anchor link to the rar file. 
<a href = "large document. rar"> Download the large document </a> 


Tips: 

Most operating systems have some compression software built in. If doesn’t, look up 
"WinRAR" in a search engine to find a program to build them. 

This technique can be used for images. movies, music, and documents as well as PDF 
files. Anything that can be compressed as a rar file can be posted to the site for 


downloading. 


2.3.8 Project of Hyperlink 


Project 2.3 Home page of Walker Club (index. html version 3) 
The browser shows Project 2.3 as Figure 2. 17. 

Project 2.4 HTML document of articlel 

The browser shows Project 2. 4 as Figure 2. 18. 


288, Web 前 端 设计 一 一 HTML+CSS+ jQuery 技术 教程 


MV 


Project 2.5 HTML document of article2 
The browser shows Project 2.5 as Figure 2. 19. 
Project 2.6 HTML document of activityl 


The browser shows Project 2.6 as Figure 2. 20. 


2.4 Insert images 


2.4.1 Img Tag 


Example 2, 37 
The browser shows Example 2. 37 as Figure 2. 21. 
Use <img> tag to embed an image in an HTML document. 


Syntax of img: 
<img src= "file name of image" alt = "description text of image" /> 


GIF, JPEG and PNG are common image format on web page. 

When a web page is loaded, it is the browser, at that moment, which actually gets 
the image from a web server and inserts it into the page. Therefore, make sure that the 
images actually stay in the same spot in relation to the web page, otherwise your visitors 
will get a broken link icon. The broken link icon is shown if the browser cannot find the 
image. 

To display an image on a page, you need to use the src attribute. Src stands for 
"source", The value of the sre attribute is the URL of the image you want to display on 
your page. So we can see the src attribute as a link to an image file. In Example 2. 37, 
smile. gif is in the same directory with "Example 2. 37. html". However, if the image file 
and web page are not in the same directory, relative path studied in previous section must 
be used in sre attribute value,see Project 2. 7. 

The alt attribute is meant to be used as an alternative text if the image is not available 
or cannot be seen by visually impaired users. If an image file cannot be displayed, at least 


users can see its alt text. 


2.4.2 Use Img Element as Hyperlink 


Img element can be made a hyperlink like this: 
<a href ="url">< img src= "file name of image" /></a> 


For example: 


Example 2. 38 
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2.4.3 Project 


Project 2.7 Add image to articlel. html 
The browser shows Project 2.7 as Figure 2. 22. 


G.: 5 Tables 
—_ 


A simple HTML table, contains two rows and two columns. 

Example 2. 39 

Tables are defined with the <table> tag, A table is divided into rows (with the <tr> 
tag), and each row is divided into data cells (with the <td> tag). The letters td stands 
for "table data" ,which is the content of a data cell. A data cell can contain text, images, 
lists, paragraphs, forms, horizontal rules, tables. etc. 

Syntax of table; 

<table border = "pixels"> 

< caption > caption text </caption> 


<tr><th> header celll </th>< th > header cell2 </th>…</tr> 
<tr><td> celll </td><td> cell2 </td>…</tr> 


</table> 

Border attribute is used to display a table with borders. 

<caption> tag inserts a caption for the table. 

<tr> tag defines a table row. All of the <td> and <th> tags enclosed will appear 
in the same row of the table. 

<th> tag inserts a table header cell. The text contained inside is usually displayed in 
bold and is centered inside the cell. 

<td> attribute inserts a table data cell. 

Now, use the above tags and attribute to modify Example 2. 39 into four rows and 
three columns with table caption. 

Example 2. 40 


The browser shows Example2. 40 as Figure 2. 23. 


2.6 HTMLS5 


2.6.1 A Basic HTML5 Template 


Let’s take a look at what a HTML5 code like: 
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Example 2. 41 
The browser shows Example 2. 41 as Figure 2. 24. 


The DOCTYPE 


Doctype is simply a way to tell the browser what type of document they’re looking at. 
In the case of HTML files, it means the specific version of HTML. The doctype should 
always be the first item at the top of all HTML files—even before <html> tag! 

In the past, the doctype declaration was an ugly and hard-to-remember mess. For 
XHTML 1.0 Transitional: 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www. w3. org/TR/xhtml1/DTD/xhtml1-transitional. dtd"> 
And now for HTML5, its just: 

<! DOCTYPE html > 

Or 

<!doctype html > 


Simple, and to the point. 


2.6.2 Define the Page’s Structure 


Now, let’s give the page some basic structure. 
Later is this book, HTML5+CSS3 will show it’s power, for now, just consider what 
elements to use in building site’s overall layout. 


The elements related to page’s structure are: 
1. Header Element 


Naturally, the first element the visitors look at is the header element. A header 
element can be used to include introductory content or navigational aids. While header 
element will frequently be placed at the top of a page or section, its name meaning is 
independent from its position. The site’s layout call for the title of an article or blog post 
to be off to the left, right. or even below the content, regardless, the header still can be 


used to describe this content. 
2. Section Element 


A section is a thematic grouping of content. typically with a heading. 

Some example of acceptable uses for section elements include: 

e individual sections of a tabbed interface. 

e different parts of a lengthy "terms of service" page. 

* various sections of an online news site; for example. articles could be grouped into 


sections covering sports, world affairs, and economics news. 
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3. Article Element 


As its name implies, an article is a single piece of content that can stand on its own. 
Here are some suggestions for using article element: 

e forum posts. 

* magazine or newspaper articles. 

e blog entries. 


* user-submitted comments. 
4. Nav Element 


Nav represents exactly what it implies: a group of navigation links. It’s safe to say 
that this element will appear in virtually every web project. 

The nav element can be used more than once on a given page. For example, both 
primary navigation bar and secondary set of links pointing to different parts of the current 


page(in-page anchors) could be wrapped in nav element. 
5. Aside Element 


This element represents a part of the page that’s separate from that content. The 
aside element could be used to wrap a portion of content that is tangential to; 
e a specific standalone piece of content(such as article or section). 
e an entire page or document, as is customarily done when adding a "sidebar" to a 
page or website. 
Some possible uses for aside include a sidebar. or a block of advertising. It should 
also be noted that the aside element is not defined by its position on the page. It could be 


on the "side", or it could be elsewhere. 
6. Footer Element 


This element represents a footer for the section of content that is its nearest ancestor. 
The "section" could be the entire document, or it could be a section, article, etc. 

A footer often contains copyright information. lists of related links, author 
information, and similar content that normally think of as coming at the end of a block of 
content. However, much like aside and header, a footer element is not defined in terms of 
its position on the page, hence, it does not have to appear at the end of a section, or at the 


bottom of a page. Most likely it will, but this is not required. 
7. Structuring A Page 


The page structural elements in HTML5 have been covered, it’s time to build the 
page. 
The top of page has header element. It makes sense to include the logo, title and 
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tagline. Nav element for the website navigation can be included in it too. 

After the header, the website main content is divided into two columns. The left 
column is sidebar and the right column is article. 

At the bottom of the page is footer element which includes copyright, author, etc. 

It need to be noted that in the following Example 2. 42, the code like id ="maincontent" is 
related with CSS concept which will be covered in next chapter. 

As a summary of HTMLS5 structural elements, take a look at Example 2. 42. 

Example 2.42 Structuring a page by using HTML5 structural element. 

A webpage layout maybe look like Figure 2. 25. 


2.6.3 Video and Audio 


Before HTML5, there was no standard for playing video and audio files on a web 
page. Before HTML5 video and audio files had to be played with a plug-in (like flash). 
However, different browsers supported different plug-ins. 

Plugin like Adobe’s Flash Player is controlled solely by Adobe, and is not open to 
community development. The introduction of the video and audio elements in HTML5 
resolves this problem and makes multimedia a seamless part of a web page, the same as 
img element. With HTML5, there is no need for the user to download third-party 
software to view multimedia content, and the video and audio player is accessible via 


scripting. 
1. Video 


In Example 2. 41, HTML5 <video> tag shows its ability to play video file. Let’s 
take a close look at how to use the <video> tag. 

It is a good idea to always include width and height attributes. If height and width are 
set, the space required for the video is reserved when the page is loaded. However, 
without these attributes, the browser does not know the size of the video, and cannot 
reserve the appropriate space to it. The effect will be that the page layout will change 
during loading (while the video loads). 

The controls attribute adds video controls, like play, pause, and volume. 

Text content should also be inserted between the <video> and </video> tags for 
browsers that do not support the <video> element. 

(1) The Markup 

Similar to the img element. the video element should also include width and height 
attributes: 

<video src = "movie.mp4" width = "320" height = "240"></video> 


Syntax of video 
<video src = "url" width = "pixels" height = "pixels" attributes > text </video> 
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Notes on attributes: 

src; required. Location of video file. 

width: optional. Width of video player. 

height: optional. Height of video player. 

Even though the dimensions can be set in the markup, they'll have no effect on the 
aspect ratio of the video. For example, if the video in the above example was actually 
320 * 200 and the markup was as shown above, the video would be centered vertically 
inside the 240-pixel space specified in the HTML. This stops the video from stretching 
unnecessarily and looking distorted. 

controls; optional. Boolean attribute, so no value is required. Its inclusion in the 
markup tells the browser to make the controls visible and accessible to the user, Like this: 

<video src = "movie.mp4" width = "320" height = "240" controls> 

</video > 

autoplay; The Boolean autoplay attribute does exactly what it says; tell the webpage 
to play the video automatically when the page is loaded. 

Here is how the autoplay is used; 

<video src = "movie.mp4" width = "320" height = "240" controls autoplay> 

</video > 

loop: The loop attribute will tell the browser to seek back to the start of the media 
resources upon reaching the end. It is used as this: 

<video src = "movie.mp4" width = "320" height = "240" controls autoplay loop> 

</video> 

(2) Support for Multiple Video Formats 

It would be nice if browser support allowed the user to choose a single video format. 
Unfortunately, it’s not quite that simple—although things are improving. Currently, 
there are 3 supported video formats for the <video> element: MP4. WebM, and Ogg. 
Table 2. 1 shows the browsers version which support the HTML5 video formats. 

To allow inclusion of multiple video formats, the video element allows source 
elements to be defined so that you can allow every user agent to display the video using the 
format of its choice. These elements serve the same function as the src attribute on the 
video element.so if source elements are provided. there’s no need to specify a sre for video 
element. 

Taking current browser support into consideration, here’s how source elements are 
used, 


Example 2. 43 
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Table 2.1 Browser support for HTMLS Video 


Browser MP4 WebM Ogg 


IE 9 十 = = 
Chrome 3+ 6+ 3 十 
Firefox SSF 4+ 3.5+ 


e MP4 = MPEG 4 files with H264 video codec and AAC audio codec 
e WebM = WebM files with VP8 video codec and Vorbis audio codec 
* Ogg = Ogg files with Theora video codec and Vorbis audio codec 
MIME Types for Video Formats( Table 2. 2) : 


Table 2.2 Mime Types for Video Formats 


Video Format MIME-type 


MP4 video/mp4 
WebM video/webm 
Ogg video/ogg 


2. Audio 


Much of what have discussed in relation to HTML5 video also apply to the audio 


element, with the obvious exceptions that video related to visuals. 


Similar to the video element, the src, controls, autoplay, loop can be used on the 


audio element. The audio element won't display anything unless controls are present, but 


even if the element’s controls are absent, the element is still accessible via scripting. This 


is useful if the site use sounds that are not tied to controls presented to the user. The 


audio element nests source tags» similar to video, and it will also treat any child element 


that’s not a source tag as fallback content for nonsupporting browsers. Run Example 2. 44 


on IE9 and IE8 will see the different effect. 
Example 2. 44( Table 2.3 and Table 2. 4) 


Table 2.3 Browser support for HTMLS Audio 


Browser MP3 Wav Ogg 
E 9+ 9 + 
Chrome 3+ 3+ 
Firefox = 3. 5 十 


Table 2.4 Mime Types for Audio Formats 


Video Format MIME-type 
MP3 audio/mpeg 
Wav audio/ wav 


Ogg audio/ogg 


CSS | 


6.1 Introduction to CSS 


HTML was never intended to contain tags for formatting a document. HTML was 
intended to define the content of a document, like: 

<hl > This is a heading </h1 > 

<p> This is a paragraph. </p> 

When tags like < font >. and color attributes were added to the HTML 3, 2 
specification, it started a nightmare for web developers. Development of large web sites, 
where fonts and color information were added to every single pages became a long and 
expensive process. 

To solve this problem, the World Wide Web Consortium (W3C) created Cascading 
Style Sheets (CSS). From XHTML 1. 0 on, all formatting could be removed from the 
XHTML document, and stored in a separate CSS file. All browsers support CSS today. 

The separation of presentation from content is one of the fundamental design 
principles of HTML5. Separating presentation from content allows you to serve the same 
text to different clients and let them decide how to format it in the way that best suits their 
needs. A cell phone browser doesn’t have the same capabilities as a desktop browser such 
as Firefox. Indeed, a browser may not display content visually at all. For instance, it may 
read the document to the user. 

Consequently, the HTML5 should focus on what the document means rather than on 
what it looks like. CSS defines how HTML5 elements are to be displayed. Now HTML5 + 
CSS3 become a newest web standards approach. 

CSS was a revolution in the world of web design. The concrete benefits of CSS 
include: 

e Control layout of many documents from one single style sheet; 

。 More precise control of layout; 

。 Apply different layout to different media-types (PC. mobile phone, printer, etc. ); 


e Numerous advanced and sophisticated techniques. 


296 


VY 


Web 前 端 设计 一 一 HTML+CSS+jQuery 技 术 教程 


6. 2 Insert CSS to Web Page 
<v- 


There are three ways of inserting a style sheet: 
e Inline style. 
e Internal style sheet. 


¢ External style sheet. 


3.2.1 Inline Style 


Syntax of inline style: 


<tag style = "property: value; property: value; --"> 


tag: XHTML tag’s name. 

style; style attribute, which can be used to any tag within the <body> with the 
exception of basefont, param and script. The style attribute can contain any CSS 
property. 

Colon ":" is used to separate the property and value, and semicolon ";" is used to 
separate the property definitions. 

Example 3. 1 

The browser shows Example 3. 1 as Figure 3. 1. 

Inline style loses many of the advantages of style sheets by mixing content with 


presentation. Use this method sparingly! 


3.2.2 Internal Style Sheet 


An internal style sheet should be used when a single document has a unique style. 
Internal styles are defined in the head section of an XHTML page. by using the <style> 
tag, like the following: 

Syntax of internal style: 

<style type = "text/css"> 


<! -- 


selector1{ property: value; property: value; … } 
selector2{ property: value; property: value; … } 


--> 

</style> 

style; defines the styles within this tag. 

type: specifies the style is defined according to CSS syntax (type = "text/css"). 

<| 一 … 一 二 : XHTML comment tag, used to protect old browsers because they may 


not know the CSS. 
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selector; is normally the XHTML element/tag to be defined (will study it in later 
part of this chapter). 

The property and value are separated by a colon, and surrounded by curly braces. 

Example 3. 2 


The browser shows Example 3. 2 as Figure 3. 2. 
1. Advantages of Internal Style Sheets 


e Internal style sheets affect only the page they are on. 

If you are working on a large site and need to test styles before you load them on the 
site as a whole, internal style sheets can be a great tool. They allow you to test the styles 
in the context of the entire site without breaking any page but the one you are testing. 

e Internal style sheets can use classes and IDs. 

Unlike inline styles, internal style sheets can still take advantage of classes. IDs, 
siblings, and other element relationships. 

e Internal style sheets don’t require that you upload multiple files. 

This is especially useful when you're working with things like email or kiosks where 
you have only one XHTML file available to edit. Keeping the styles with the document 
means you know what styles affect that document. 

e Internal styles may have higher precedence than external style sheets. 

This is determined by the order that the external style sheets are loaded. The Web 
developer of the page has control over where the internal styles will be placed in the head 
of the document. If they are placed after the link to external styles, they will have a higher 


precedence in the cascade, and over-ride the external style sheet. 
2. Disadvantages of Internal Style Sheets 


e They affect only the page they are on. 

If you want to use the same styles in several documents, you need to repeat them for 
every page (or link to an external style sheet). 

e Internal style sheets increase page load times. 

Every page that has an internal style sheet must load and parse the style sheet 
information every time the page is loaded. External style sheets are cached by browsers— 
which improves load times for every page after the first is loaded. 

关于 选择 符 (selector) 及 其 使 用 将 在 3. 3 节 进 行 详细 的 讲解 。 这 里 需要 更 多 关注 的 是 
内 部 样式 所 在 位 置 Chead 元 素 内 ) 和 XHTML 的 注释 标签 (二 ! AU. FERRE 
是 为 了 避免 旧版 本 的 浏览 器 不 支持 CSS, 所 以 特意 把 style 元 素 内 容 以 注释 形式 表示 ,这 样 
对 于 不 支持 CSS 的 浏览 器 ,会 自动 忽略 此 段 内 容 。 

本 小 节 讨 论 了 内 部 样式 的 优点 和 缺点 ,由 于 读者 尚未 进行 外 部 样式 的 学 习 , 可 能 对 此 理 
解 并 不 深刻 。 学 完 外 部 样式 及 层 码 (cascading) 概 念 后 ,本 小 节 关 于 内 部 样式 优 缺 点 的 讨论 
会 完全 理解 。 
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internal style: 内 部 样式 
external style: 外 部 样式 
selector: 选择 符 
class: 类 


3.2.3 External Style Sheet 


An external style sheet is ideal when the style is applied to many pages. With an 
external style sheet, the look of an entire Web site can by changed by changing one .css 
file. 

External style sheet is created with a similar syntax to internal style sheet. However, 
all you need to include are the selector and the declaration. Just like in a internal style 


sheet, the syntax is: 


selectorl{ property: value; property: value; … } 
selector2{ property: value; property: value; … } 


Save these codes into a text file with the extension . css. 

For example, use notepad to create a file named layout. css, type the content of 
Example 3. 3 into this file. 

Example 3. 3: layout. css 

Once a style sheet document is created, link it to the Web pages. This can be done in 


two ways: 
1. Linking 


Use XHTML <link> tag to link a style sheet. The <link> tag goes inside the head 
section. 


Syntax of link tag: 
< link rel = "stylesheet" type = "text/css" href = "styles.css" /> 


rel: specifies the relationship between the current document and the linked document, 
in this case a stylesheet file to link. 

type: specifies the MIME type of the linked document. 

href: specifies the location of the linked document, in this case the path to the 
stylesheet (. css) file. 

Example 3. 4 

The browser shows Example 3. 4 as Figure 3. 2, the same as Example 3. 2. However, 
as an internal style sheet, Example 3. 2 can only affect the page they are on; as an external 
style sheet file—Example 3.3. layout. css: can be used by any XHTML document in the 


website. 
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2. Importing 


Use an imported style sheet within a document level style sheet (internal style sheet), 
so that the attributes of an external style sheet can be imported while not losing any 
document specific ones. It is called in a similar way to calling a linked style sheet, only it 
must be called within a document level style declaration. For example: 

Syntax of importing style sheet; 

<style type = "text/css"> 

<! 一 

@ import url("stylesl.css") ; 
@ import url("styles2.css") ; 
internal style sheet declaration 

--> 

</style> 

styles]. css, styles2. css and so on are style sheet file to be imported to this web page. 

Note: 

(1) @import declaration must be put at the beginning of style element, and then 
internal style sheet declaration. 

(2) The order of @import declaration decides how the style sheets cascading. 

(3) Semicolon at the end of @import declaration cannot be omitted. 

You can import as many external style sheets as you need to maintain your web site. 


Replace 
< link rel = "stylesheet" type = "text/css" href = "layout.css" /> 
in Example 3.4 with 


<style type = "text/css"> 

<! -- 

@ import url("layout. css"); 

--> 

</style> 

Example 3.5 

Example 3.5 is shown in the browser as Figure 3. 2, the same as Example 3. 2 and 


Example 3. 4. 


3.2.4 Cascade in CSS 


Cascading Style Sheets or CSS are set up so that many properties all affect the same 
element. Some of those properties may conflict with one another. For example. a font 
color of red on the paragraph tag might be set and then later on a font color of blue is set. 
How does the browser know which color to make the paragraphs? This is decided by the 


cascade, 
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1. Types of Style Sheets 


There are three different types of style sheets: 

(1) Author Style Sheets 

These are style sheets created by the author of the Web page. They are what most 
people think of when they think of CSS style sheets. 

(2) User Style Sheets 

User style sheets are set by the user of the Web page. These allow the user to have 
more control over how the pages display. 

(3) User Agent Style Sheets 

These are styles that the Web browser applies to the page to help display that page. 
For example, in XHTML, most visual user agents display the <em> tag as italicized 
text. This is defined in the user agent style sheet. 

Properties that are defined in each of the above style sheets are given a weight. By 
default, the author style sheet has the most weight. followed by the user style sheet, and 
finally by the user agent style sheet. The only exception to this is with the ! important rule 


in a user style sheet. This has more weight than the author’s style sheet. 
2. Cascading Order 


To resolve conflicts, Web browsers use the following sorting order to determine 
which style has precedence and will be used. 

(1) First, look for all declarations that apply to the element in question, and for the 
assigned media type (display correctly on various types of media, such as on the screen, on 
paper or on mobile phone). 

(2) Then look at what style sheet it’s coming from. As above, author style sheets 
come first, then user, then user agent. With ! important user styles having higher 
precedence than author ! important styles. 

(3) The more specific a selector is, the more precedence it will get. For example, a 
style on "div. co p" will have a higher precedence than one just on the "p" tag. 

(4) Finally, sort the rules by the order they were defined. Rules that are defined later 
in the document tree have higher precedence than those defined earlier. And rules from an 


imported style sheet are considered before rules directly in the style sheet. 
3. ! important rule 


Cascade means that the styles are applied in order as they are read by the browser. 
The first style is applied and then the second and so on. What this means is that if a style 
appears at the top of a style sheet and then is changed lower down in the document, the 
second instance of that style will be the one applied, not the first. For example, in the 


following style sheet example, the paragraph text will be black, even though the first style 
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property applied is red: 

Example 3. 6 

The !important rule is a way to make CSS cascade but also have the most crucial rules 
always be applied. A rule that has the !important property will always be applied no 
matter where that rule appears in the CSS document. So if authors wanted to make sure 
that a property always applied, the ! important property would be added to the tag. So, to 
make the paragraph text always red, change above example to the following: 


Example 3.7 
4. User Style Sheets 


However, the ! important rule was also put in place to help Web page users cope with 
style sheets that might make pages difficult for them to use or read. Typically, if a user 
defines a style sheet to view Web pages with, which style sheet will be over-ruled by the 
Web page author’s style sheet. But if the user marks a style as ! important, that style will 
overrule the Web page author’s style sheet, even if the author marks their rule as 
l important. 

This is a change from CSS] to CSS2. In CSSl, author !important rules took 
precedence over user ! important rules. CSS2 changed this to make the user’s style sheet 


have precedence, 


3.2.5 CSS Best Practices 


CSS has become the de-facto way to style and lay out Web pages, but now that most 
people are using it, we need to start paying attention to how we're using it. There are 
three ways to use style sheets: and while they all have distinct purposes, there are good 
ways and bad ways to use them. Understanding the best practices of CSS Web design will 


make sure your Web pages are as good as they can be. 
1. What Does CSS Best Practices Mean 


Best practices are those methods of designing and building Web pages that have been 
shown to be most effective and get the most return for the work involved. Best practices 
for CSS can help improve your site in the following ways: 

(1) Separate content from design 

One of the main goals of CSS is to remove the design elements from the HTML and 
place them in another location for the designer to maintain. That means that a designer 
doesn’t have to also be the content developer to maintain the look of the Web site. 

(2) Make maintenance easy 

One of the most forgotten elements of Web design is the maintenance. Unlike print 
materials, once you put out a Web "magazine" it doesn't go away. Things change—from 


the look of your site to the content and links within it. And having your CSS in a central 
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place makes it that much easier to maintain. 

(3) Keep your site accessible 

Using CSS styles can keep your site more accessible both to disabled people and to 
robots like search engines. 

(4) Your site will stay current longer 

By using best practices with your CSS. you're using standards that have been proven 


to work and remain flexible as the Web design environment changes. 
2. What Is the Best Practice for CSS Instead of Inline Styles 


Instead of using inline styles, use external style sheets. External style sheets give you 
all the benefits of CSS best practices and are easy to use. If you must put styles in a 
specific XHTML document, put them in internal style sheets in the <head> of the 
document. That way, at least they're still separate from the content. Avoid using inline 


styles for any styles on your Web page. 
6.3 Class and Id Selector 
~ 


3.3.1 CSS Syntax 


The CSS syntax is made up of three parts; a selector, a property and a value. 
selector {property: value} 


Selector is normally the XHTML element/tag to be defined. The property and value 


are separated by a colon, and surrounded by curly braces. 
body {color: black} 


If more than one property is specified, each property must be separated with a 
semicolon, The example below shows how to define a center aligned paragraph, with a 


green text color, 
p {text—align: center; color: green} 
If the value is multiple words, put quotes around the value. 
p {font— family: "sans serif" } 


To make the style definitions more readable. you can describe one property on each 


line, like this: 


P 
f 
text - align: center; 
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color: red; 
font - family: Arial 
} 


Multiple selectors can be defined once. Separate each selector with a comma. In the 
example below all the header elements are defined once. All header elements will be 
displayed in blue text color: 


Example 3. 8 
CSS comments 


Comments are used to explain XHTML code. and may help authors when they edit 
the source code at a later date. A comment will be ignored by browsers. A CSS comment 


begins with "/ * ", and ends with "* /", like this: 


/ * This is a comment * / 
p 
{ 
text— align:center; 
/ * This is another comment * / 


color: red; 
font— family: Arial 
} 


3.3.2 Class Selector 


Actually, the concept of class selector has already shown up in Example 3. 2. 

With the class selector different styles can be defined for the same XHTML element, 

Say that you would like to have two types of <h1> in XHTML document; one right- 
aligned <h1l>, and one center-aligned <h1>. Here is how it can be done with styles: 

Example 3. 9 

The browser shows Example 3. 9 as Figure 3. 3. 


Syntax of class selector 


tagl.classnamel {property: value; property: value; ... } 


tag2.classname2 { property: value; property: value; . 


tagN.classnameN { property: value; property: value; …} 


"tag. classname" is still called selector. Class name defines the name of class selector; 
it can be any combination of letters or combination of letters and numbers starting with 
letter. Do not start class name with a number! 


Syntax of using the class selector in XHTML document 
< tag class= "classnamel classname2 … "> content </tag> 


To apply more than one classes per given element. separate each class name with a space. 
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Example 3. 10 

The browser shows Example 3. 10 as Figure 3. 4. 

The tag name in the class selector can be omitted in order to define a style that will be 
used by all XHTML elements that have a certain class. In the example below, all XHTML 
elements with class="center" will be center-aligned. 

Example 3. 11 


The browser shows Example 3. 11 as Figure 3. 5. 


3.3.3 ID Selector 


Like class selector. id selector has two types definition; with and without 
XHTML tag. 
Syntax of id selector with XHTML tag 


tagl + idnamel {property: value; property: value; --- } 
tag2 + idname2 { property: value; property: value; --- } 


tagN + idnameN { property: value; property: value; …} 
and syntax of id selector without XHTML tag 


+ idnamel {property: value; property: value; -- } 
+ idname2 { property: value; property: value; … 


} 
+ idnameN { property: value; property: value; …} 


Id name can be any combination of letters or combination of letters and numbers 
starting with letter. Do not start id name with a number! It will not work in some 
browsers. 


Syntax of using the id selector in XHTML document 
<tag id= "idname"> content </tag> 


Id selector vs. Class selector 

Except the full stop (. ) and pound sign (+), it seems there is no difference between 
id selector and class selector. Before discussing the difference, get to know why CSS 
choose those names: 

ID; A person’s Identification (ID) is unique to one person. 

Class; There are many people in a class. 

So, 

IDs are unique: 

e Each element can have only one ID. 

e Each page can have only: one element with that ID. 

Classes are NOT unique 


。 The same class can be used on multiple elements. 
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e Multiple classes can be used on the same element. 

Standards specify that any given ID name can only be referenced once within a page or 
document. From experience: IDs are most commonly used correctly in CSS layouts. This 
makes sense because there are usually only one menu per page, one banner, and usually 
only one content pane. 

Use IDs when there is only one occurrence per page. Use classes when there are one 
or more occurrences per page. 

Example 3. 12 

The browser shows Example 3. 12 as Figure 3. 5, the same as Example 3. 11. 
However, if Example 3. 12 is validated with W3C standards (website: http://validator. 


w3. org/), the error message will be shown as Figure 3. 6. 


3.4 CSS Common Properties 


3.4.1 CSS Font 


CSS font properties define the font family, boldness, size, and the style of a text. 
1. Font Family 


Property: font-family 

Value; Times, Georgia, Arial, Rik. EB . HER 

The font family of a text is set with the font-family property. The font-family 
property can hold several font names as a "fallback" system. If the browser does not 
support the first font, it tries the next font. 

Note: If the name of a font family is more than one word, it must be in quotation 
marks, like font-family: "Times". 


More than one font family is specified in a comma-separated list: 


p{font-family:"Times" , Georgia, Serif} 


2. Font Size 


Property: font-size 

Value; length | % | small | medium | large | smaller | larger | … 

The font-size property sets the size of the text. 

Being able to manage the text size is important in web design. However. font size 
adjustments should not be used to make paragraphs look like headings. or headings look 
like paragraphs. Always use the proper XHTML tags, like <hl >-<h6> for headings 
and <p> for paragraphs. 


The font-size value can be an absolute or relative size. 
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Absolute size (mm, cm, in, pt): 

e Sets the text to a specified size. 

e Does not allow a user to change the text size in all browsers (bad for accessibility 

reasons, good for hard copy). 

e Absolute size is useful when the physical size of the output is known. 

Relative size (em, ex, px): 

e Sets the size relative to surrounding elements. 

e Allows a user to change the text size in browsers. 

The following example sets the font size by using pixels unit. 

Example 3. 13 

The browser shows Example 3, 13 as Figure 3. 7. 

Internet Explorer cannot resize the font size of Example 3.13. To avoid the resizing 
problem with Internet Explorer, many authors use em instead of pixels. The em size unit 
is recommended by the W3C. lem is equal to the current font size. The default text size in 
browsers is 16px. So, the default size of lem is 16px. The size can be calculated from 
pixels to em using this formula; pixels/16 = em. 

Example 3. 14 sets the font size by using em unit. The browser shows Example 3. 14 
as Figure 3.7 too, the text size in em is the same as the Example 3. 13 in pixels, but this 
time Internet Explorer can resize the font size. 

Example 3. 14 


3. Font Style 


Property: font-style 

Value: normal (default) | italic | oblique 

The font-style property is mostly used to specify italic text. 

This property has three values: 

e normal The text is shown normally (default value). 

e italic The text is shown in italics. 

e oblique The text is "leaning" (oblique is very similar to italic, but less 
supported), 

Example 3. 15 

The browser shows Example 3. 15 as Figure 3. 8. 


4. Font Weight 


Property: font-weight 
Value: normal (default) | bold | bolder | lighter | 100 | 200 | 300 | … 
The font-weight property specifies the weight of a font. It has two major values: 


normal (default) |bold, which can be used as following. 


. bold{font - weight: bold} 
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5. Font Variant 


Property: font-variant 

Value: normal (default) | small-caps | inherit 

The font-variant property specifies whether or not a text should be displayed in a 
small-caps font. It has two major values; normal (default) | small-caps, which can be used 


as following. 


. small 
{ 
font - variant: small - caps; 
} 


6. Font-shorthand property 


Property: font 

Value (in order); font-style font-variant font-weight font-size/line-height font-family 

The font shorthand property sets all the font properties in one declaration. The 
properties that can be set are (in order); font-style, font-variant, font-weight, font-size/ 
line-height, font-family. The line-height property sets the space between lines. 

If one of the values above are missing, e. g. "font:100% verdana;", the default value 


for the missing property will be inserted. if any. Font property can be used like this: 


.s1 {font: italic normal bold 1.2em Arial} 


3.4.2 CSS Text 
The CSS text properties define the appearance of text. 
1. Text Alignment 


Property; text-align 

Value; left | center | right | justify 

The text-align property is used to specify the horizontal alignment of a text. Text can 
be centered. or aligned to the left or right. or justified. When text-align is set to 
"justify", each line is stretched so that every line has equal width, and the left and right 
margins are straight (like in magazines and newspapers). Text-align property can be used 
like the following: 


.date {text-align: right} 
p (text-align: justify} 
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2. Text Decoration 


Property: text-decoration 

Value: none | underline | overline | line-through | blink 

The text-decoration property is used to decorate the text. The text-decoration 
property is mostly used to remove underlines from links for design purposes; 

Example 3. 16 

Example 3. 16 is shown in the browser as Figure 3. 9. Underline of "Click to Email 


me." is removed. 
3. Text Indent 


Property; text-indent 
Value; length | % 
The text-indent property is used to indent the first line of text in an element. Like 


font-size property, relative length unit em is recommended. It can be used like this: 


div {text - indent: 1.75em} 


4. Text Color 


Property: color 

Value: color_name | RGB | Hex 

The color property is used to set the color of the text. The color can be specified by: 
name—a color name, like "red" 

RGB 一 an RGB value, like "rgb(255,0,0)" 

Hex—a hex value, like " + ff0000" 

It can be used like this; 


h1 {color: #££0000} 
p {color: green} 


5. Letter Space 


Property; letter-spacing 
Value: normal (default) | length 
The letter-spacing property sets the space between characters. Relative length unit em 


is recommend when set the non-normal space. 


Project 3.1: layout.css 
Project 3.2: index. html 


3.4.3 CSS Background 


CSS background properties are used to define the background effects of an element. 
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1. Background Color 


Property: background-color 

Value: color_name | RGB | Hex 

The background-color property specifies the background color of an element. The 
background color of a page is defined in the body selector, 

In the example below, the hl, p, and div elements have their own background colors; 

Example 3. 17 

The browser shows Example 3. 17 as Figure 3. 10. 


2. Background Image 


Property: background-image 

Value: url(image file-name) 

The background-image property specifies an image to use as the background of an 
element. By default, the image is repeated so it covers the entire element. 

The background image for a page can be set like this: 

Example 3. 18 


The browser shows Example 3. 18 as Figure 3. 11. 
3. Background Repeat 


Property: background-repeat 

Value: repeat (default) | repeat-x | repeat-y | no-repeat 

By default, the background-image property repeats an image both horizontally and 
vertically like Example 3. 18. Some images should be repeated only horizontally or 
vertically, or not be repeated at all. The following example shows the image leaf. jpg only 
once in the browser’s window. 

body 

{ 

background - image: url(leaf. jpg); 

background - repeat: no - repeat; 

} 


4. Background Attachment 


Property: background-attachment 

Value: scroll (default) | fixed 

The background-attachment sets whether a background image is fixed or scrolls with 
the rest of the page. 

Example 3. 19 

The browser shows Example 3. 19 as Figure 3. 12. 
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Try to scroll the web page of Example 3. 19, then replace the fixed value of line 9 
scroll value, save the file, refresh the web page, scroll the web page once more, the 


page will look strange. 
5. Background Position 


Property: background-position 
Value: xpos ypos | x% y% | top left | top right | bottom left | … 


The background-position property specifies the starting position of a background 


image. The style sheet in Example 3. 19 can be added a background-position property like 


this: 


back 


prop 


prop 


Example 3. 20 


The web page will look a little bit strange when Example 3. 20 was applied. 
6. Background-shorthand property 


Property: background 

Value (in order ); background-color background-image _ background-repeat 
ground-attachment background-position 

Like font property studied before, the background property can set all the background 
erties in one declaration too. It does not matter if one or more than one of the 


erty values are missing, as long as the ones that are present are in this order, 


Example 3. 20 can be written in shorthand like this: 


body{ background: url(leaf. jpg) no- repeat fixed 20px 50px} 


3.4.4 CSS Border 


The CSS border properties define the borders around an element. 
1. Border Style 


Property: border-style 
Value: none | dotted | dashed | solid | double | groove | ridge | inset | outset 


The border-style sets the style of the border. None of the other border properties will 


have any effect unless border-style is set. 


Example 3. 21 


The browser shows Example 3. 21 as Figure 3. 13. 
2. Border Width 


Property: border-width 
Value: medium (default) | thin | thick | length (in mm, px, em, etc. ) 


The border-width sets the width of the border. The border-width property only works 
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when the border-style property is set the first. It can be like this: 


.borderl {border - style: solid; border - width: 1em; } 
3. Border Color 


Property: border-color 


Value: color_name | RGB | Hex 
The border-color is used to set the color of the border. It can be written like this: 


.vedborder {border - style:dashed; border - color: red; } 
. blueborder {border - style: dashed; border - color: RGB(0,0,255); } 


4. Border-shorthand property 


Property: border 

Value (in order): border-width border-style border-color 

There are many properties to consider when dealing with borders. To shorten the 
code, it is also possible to specify all the border properties in one property. It can be 


written like this: 


.redborder {border: 1em dashed red} 


3.4.5 CSS Margin 


The CSS margin properties define the space (margin) around elements. The margin 
property declares the margin between an XHTML element and the elements around it. 


The margin property can be set for the top, right, bottom and left of an element. 


1. Margin-Individual sides 


Properties; margin-left, margin-right, margin-top, margin-bottom 


Value: % | length (in, mm, px. em, etc) | auto 


When auto value is chosen, the browser sets the margin. The result of this is 


depended on the browser. They can be written like this: 


. marginl 

{ 

margin - top: 10px; 
margin - bottom:10px; 
margin - right:30px; 
margin - left:30px; 
} 


2. Margin-shorthand property 


Property: margin 
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Value (in order): margin-top margin-right margin-bottom margin-left 
All the margins of an element can also be declared in a single property. If all 4 margin 


values are declared, the order is as follows: top right bottom left. like this: 

-marginl {margin: 10px 30px 10px 30px} 

If only one value is declared, it sets the margin on all sides, like this: 

.marginl {margin: 10px } 

If only two or three values are declared, the undeclared values are taken from the 
opposite sides, like this: 

.marginl {margin: 10px 30px } / * two values * / 

.margin2 {margin: 10px 30px 10px} /* three values * / 

Example 3, 22 

The browser shows Example 3. 22 as Figure 3. 14. Pay attention to the margin 


between the inside border (2px solid gray) and outside border (2px solid red) in two 


situations, 


3.4.6 CSS Padding 


Padding is the distance between the border of an XHTML element and the content 
within it. The CSS padding properties define the distance. Most of the rules for margins 


also apply to padding, except there is no "auto" value. 
1. Padding-Individual sides 


Properties; padding-left. padding-right, padding-top. padding-bottom 
Value: % | length (ins mm, px, em, etc) 
It is possible to specify different padding for different sides like following: 
. padding1 
{ 
padding - top: 10px; 
padding - bottom: 10px; 
padding - right: 30px; 
padding - left: 30px; 
} 


2. Padding-shorthand property 


Property: padding 
Value (in order): padding-top padding-right padding-bottom padding-left 
All the padding properties of an element can also be declared in a single property. If 


all 4 padding values are declared. the order is as follows: top right bottom left. like this: 
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.paddingl {padding: 10px 30px 10px 30px} 
If only one value is declared, it sets the padding on all sides, like this: 
.paddingl {padding: 10px } 


If only two or three values are declared. the undeclared values are taken from the 


opposite sides, like this: 


.paddingl {padding: 10px 30px } /x two values */ 

.padding2 {padding: 10px 30px 10px} /* three values */ 

The following example shows the difference between margin and padding. 
Example 3, 23 


The browser shows the Example 3. 23 as Figure 3. 15. 


3.4.7 CSS Box Model 


Every element in web design is a rectangular box. In CSS, the term "box model" is 
used when talking about design and layout. The CSS box model is essentially a box that 
wraps around XHTML elements, and it consists of; margins, borders, padding, and the 
actual content. 

The box model allows us to place a border around elements and space elements in 
relation to other elements. The Figure3. 16 illustrates the box model. 

In order to set the width and height of an element correctly in all browsers, you need 
to know how the box model works. When the width and height properties of an element 
are specified with CSS, it is just setting the width and height of the content area. The full 
size of the element (box) also includes the padding, border and margin. The total width of 


the element (box) in the following example is 300px: 


.element1 


{ 
width: 250px; 
padding: 10px; 
border: 5px solid gray; 
margin: 10px; 
} 
Let’s do the math: 
250px (width) + 20px (left and right padding) + 10px (left and right border) + 
20px (left and right margin) = 300px 
The total width of an element (box) should always be calculated like this; 
Total width of box = width + padding- left + padding-right + border - left + border - right 
+ margin- left + margin- right 


Total height of box = height + padding-top + padding - bottom + border - top + border - 
bottom + margin-top + margin - bottomR 
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The Figure 3.17 illustrates the hierarchy of box model. 

Example 3. 24 

The browser shows the box as the Figure 3. 18. 

From now on, the boxmodel class in Example 3. 24 will be added different box model 
element. 


Set the padding to 20px as following: 


. boxmodel 

{ 

width: 280px; 

height: 280px; 

background - image: url( puppy. jpg); 
padding: 20px; 

} 


The browser shows the box as the Figure 3. 19. 
Figure 3.20 A paragraph with 20px padding 
Set the border to 20px gray as following: 


. boxmodel 


{ 

width: 280px; 

height: 280px; 

background - image: url( puppy. jpg); 
border: solid gray 20px; 

} 


Now, the box is shown in the browser like Figure 3. 20. 


Set the margin to 20px as following: 


. boxmodel 


{ 

width: 280px; 

height: 280px; 

background - image: url(puppy. jpg); 
margin: 20px; 


} 


The box is shown in the browser like Figure 3. 21. 


Set all box model elements as following: 


. boxmodel 

{ 

width: 280px; 

height: 280px; 

background - image: url( puppy. jpg); 

margin: 20px; padding: 20px; border: solid gray 20px; 
} 


Finally, the browser shows the modified Example 3. 24 as Figure 3. 22. 
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Now, apply all box model elements to the fictional Walker Club homepage index. html 
as Project 3. 3 and Project 3. 4. 
Project 3.3: layout. css 


The browser shows Project 3. 4 as Figure 3. 23. 


3.4.8 CSS Pseudo-class 


A pseudo-class is similar to a class, but it’s not a true class. CSS pseudo classes are 
used to add special effects to some selectors. 


Syntax of pseudo - class 
selector: pseudo - class {property: value} 


A pseudo-class starts with a colon (:). It can be like this: 
a: link{color: red} 


Anchor (<a> tag) pseudo-classes are most common pseudo-classes. There are four 
pseudo-classes of anchor: 

:link specifies a style to an unvisited link 

:yisited specifies a style to a visited link 

:hover specifies a style to an element when the mouse over it 

:active specifies a style to an element that is activated 

Example 3. 25 

Verify the above example’s anchor color by putting the mouse over the link, clicking 
the link, 

Note: a:hover must come after a:link and a: visited in the CSS definition. a:active 


must come after a:hover in the CSS definition in order to be effective. 


3.5 Css3 


CSS3 is the latest standard for Cascading Style Sheets. It builds on CSS2, the current 
standard, and adds several new features. 

Many of these new features allow designers to apply advanced styles and designs to 
elements in a webpage using just style sheets. In the CSS2 standard. for example, an 
element’s borders have square edges. Designers who want to give their webpages a softer 
feel with rounded borders have to resort to a tedious process of splicing and inserting 
images of rounded borders. Now with CSS3, the designer can create a rounded border by 
simply specifying it with the border property. 

As of CSS3 is still in development. To make the process easier, the entire standard 
has been divided into modules, which pertain to specific design and style features. For 


example, there are modules for color. selectors: fonts. borders etc. 
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This section covers several of the new features introduced in CSS3. 


3.5.1 CSS3 Borders 


1. Set borders radius 


Just like previously mentioned, CSS3 can be used to design rounded borders. Take a 
look at Example 3. 26. 

Example 3. 26 

The browser shows Example 3. 26 as Figure 3. 24. 

Syntax of setting borders radius 


border - radius:1- 4 length value 
border - * * radius: length value 


Note: The four values for each radii are given in the order top-left, top-right, bottom- 
right, bottom-left. If bottom-left is omitted it is the same as top-right. If bottom-right is 
omitted it is the same as top-left. If top-right is omitted it is the same as top-left. 

border-radius;25px 10px; 

is equivalent to; 

border - top - left - radius: 25px; 

border - top ~ right - radius: 10px; 

border - bottom - right - radius: 25px; 

border — bottom - left — radius:10px; 


2. Attach drop-shadow to a box 


Take a look at the following example. 
Example 3. 27 
The browser shows Example 3. 27 as Figure 3. 25. 


Syntax of box-shadow 
box - shadow: h- shadow v - shadow blur spread color 


Note; 

h-shadow: Required. The position of the horizontal shadow. Negative values are 
allowed. 

y-shadow: Required. The position of the vertical shadow. Negative values are 
allowed. 

blur: Optional. The blur distance. 

spread; Optional. The size of shadow. 

color; Optional. The color of the shadow. The default value is black. 


The box-shadow property is supported in IE9+. Chrome and Firefox. 
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3.5.2 CSS3 Gradients 


CSS3 gradients display smooth transitions between two or more specified colors. 

Before CSS3, these effects had to be used image processing software like Photoshop. 
However; by using CSS3 gradients the users can reduce download time and bandwidth 
usage. In addition, elements with gradients look better when zoomed, because the 
gradient is generated by the browser itself. 

CSS3 defines two types of gradients: 

Linear Gradients (goes down/up/left/right/diagonally) 

Radial Gradients (defined by their center) 


1. Linear Gradients 


Take a look at the example first. 

Example 3.28 Linear Gradients 

Because this gray-scale book cannot display the gradient effect precisely, the figure 
will not be snapped here, readers can run this example on IE10 +, Chrome26 + or 
Firefoxl6+ to see the gradient effect. 

To create a linear gradient, designer must define at least two color stops. Color stops 
are the colors to render smooth transitions among. Direction (or an angle) can be set along 
with the gradient effect. 


Syntax of Linear Gradients 
background: linear-gradient(direction, color-stopl, color-stop2, ...) 


Example 3. 28 = grad1 shows a linear gradient that starts from the left. It starts red, 
transitioning to blue. 

Designer can make a gradient diagonally by specifying both the horizontal and vertical 
starting positions. Example = grad2 shows a linear gradient that starts at top left and goes 
to bottom right. It starts red. transitioning to blue. 

CSS3 gradients also support transparency, which can be used to create fading effects. 

To add transparency, the rgba() function is used to define the color stops. The last 
parameter in the rgba() function can be a value from 0 to 1, and it defines the transparency 
of the color; 0 indicates full transparency, 1 indicates full color (no transparency). 

Example 3. 28 = grad3 shows a linear gradient that starts from the left. It starts fully 


transparent, transitioning to full color red. 
2. Radial Gradients 


Example 3. 29 Radial Gradients 
Because this gray-scale book cannot display the gradient precisely. the figure will not 


be snapped here, readers can run this example on IE10+, Chrome26~+ or Firefoxl6+ to 
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see the gradient effect. 

A radial gradient is defined by its center. 

To create a radial gradient the designer must also define at least two color stops; 
specify the gradient’s center, shape (circle or ellipse) as well as its size. By default, center 
is center, shape is ellipse, and size is farthest-corner. 


Syntax of Radial Gradients 
background: radial - gradient(center, shape size, start - color, ..., last - color) 


The shape parameter defines the shape. It can take the value circle or ellipse. The 
default value is ellipse. 

Example 3. 29 = gradl has no shape parameter, so the shape is ellipse (default). 
Example 3.29 = grad2 has a shape parameter circle. so the shape is circle. 

Gradients has many parameters and usages, the interested readers can refer to CSS3 


reference for more detailed usage and skill. 


3.5.3 CSS3 Text Effects 


CSS3 contains several new text features. However, many new CSS3 text features are 
not supported by major browsers by now. In this section, only text-shadow property is 
introduced. 

Example 3. 30 Text shadow effect 

The browser renders Example 3. 27 as Figure 3. 26. 


Syntax of text-shadow property 
text - shadow: h- shadow v - shadow blur color 


Note: 

h-shadow; Required. The position of the horizontal shadow. Negative values are 
allowed. 

v-shadow: Required. The position of the vertical shadow. Negative values 
are allowed 

blur; Optional. The blur distance. 

color; Optional. The color of the shadow. 


The text-shadow property is not supported in Internet Explorer 9 and earlier versions. 


